Ajax（異步 JavaScript 和 XML）允許在不重新加載頁面情況下添加動態(tài)內(nèi)容。使用 PHP 和 Ajax，您可以動態(tài)加載產(chǎn)品列表：HTML 創(chuàng)建一個帶有容器元素的頁面，Ajax 請求加載數(shù)據(jù)后將數(shù)據(jù)添加到該元素中。JavaScript 使用 Ajax 通過 XMLHttpRequest 向服務(wù)器發(fā)送請求，從服務(wù)器獲取 JSON 格式的產(chǎn)品數(shù)據(jù)。PHP 使用 MySQL 從數(shù)據(jù)庫查詢產(chǎn)品數(shù)據(jù)，并將其編碼為 JSON 格式。JavaScript 解析 JSON 數(shù)據(jù)，并將其顯示在頁面容器中。點(diǎn)擊按鈕觸發(fā) Ajax 請求，加載產(chǎn)品列表。

PHP 與 Ajax：創(chuàng)建動態(tài)加載內(nèi)容的解決方案

簡介

Ajax（異步 JavaScript 和 XML）是一種強(qiáng)大的技術(shù)，允許在不重新加載整個頁面的情況下向網(wǎng)頁添加動態(tài)內(nèi)容。本文將指導(dǎo)您使用 PHP 和 Ajax 創(chuàng)建一個動態(tài)加載內(nèi)容的網(wǎng)站。

實(shí)戰(zhàn)案例

以下示例演示如何使用 PHP 和 Ajax 在名為「products.php」的頁面上動態(tài)加載產(chǎn)品列表：

HTML 代碼

<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 代碼

<?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);
?>

運(yùn)行示例

1. 將 HTML 和 PHP 文件保存在您的服務(wù)器上。
2. 訪問「products.php」頁面。
3. 點(diǎn)擊「加載」按鈕。
4. 產(chǎn)品列表將動態(tài)加載到頁面中，而無需重新加載整個頁面。

結(jié)論

通過結(jié)合 PHP 和 Ajax，您可以創(chuàng)建動態(tài)交互式網(wǎng)頁，輕松更新內(nèi)容而無需重新加載。這對于展示實(shí)時數(shù)據(jù)、實(shí)時聊天和其他需要定期更新數(shù)據(jù)的應(yīng)用程序至關(guān)重要。

以上是PHP 與 Ajax：創(chuàng)建動態(tài)加載內(nèi)容的解決方案的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！