Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element to which the data is added after an Ajax request loads it. JavaScript uses Ajax to send a request to the server via XMLHttpRequest to get product data in JSON format from the server. PHP uses MySQL to query the product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.

PHP and Ajax: Solutions for creating dynamically loaded content

Introduction

Ajax (Asynchronous JavaScript and XML) is a powerful technology that allows adding dynamic content to web pages without reloading the entire page. This article will guide you through creating a website that loads content dynamically using PHP and Ajax.

Practical Case

The following example demonstrates how to use PHP and Ajax to dynamically load a product list on a page named "products.php":

HTML code

<div id="product-container"></div>

<script>
// Ajax 請求函數(shù)
function loadProducts() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "get_products.php", true);
    xhr.onload = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var products = JSON.parse(xhr.responseText);
            displayProducts(products);
        }
    };
    xhr.send();
}

// 顯示產(chǎn)品函數(shù)
function displayProducts(products) {
    var productContainer = document.getElementById("product-container");
    for (var i = 0; i < products.length; i++) {
        var productItem = document.createElement("div");
        productItem.innerHTML = products[i].name + " - $" + products[i].price;
        productContainer.appendChild(productItem);
    }
}

// 加載按鈕點(diǎn)擊事件
document.getElementById("load-button").addEventListener("click", loadProducts);
</script>

PHP code

<?php
// get_products.php

// 數(shù)據(jù)庫連接
$mysqli = new mysqli("hostname", "username", "password", "database");

// 從數(shù)據(jù)庫查詢產(chǎn)品
$query = "SELECT * FROM products";
$result = $mysqli->query($query);

// 將結(jié)果轉(zhuǎn)換為 JSON 格式
$products = array();
while ($row = $result->fetch_assoc()) {
    $products[] = $row;
}

echo json_encode($products);
?>

Run the example

1. Convert HTML and PHP files are saved on your server.
2. Visit the "products.php" page.
3. Click the "Load" button.
4. The product list will be dynamically loaded into the page without reloading the entire page.

Conclusion

By combining PHP and Ajax, you can create dynamic interactive web pages that easily update content without reloading. This is critical for displaying real-time data, live chat, and other applications that require regularly updated data.

The above is the detailed content of PHP vs. Ajax: Solutions for creating dynamically loaded content. For more information, please follow other related articles on the PHP Chinese website!