Ajax（非同步 JavaScript 和 XML）允許在不重新載入頁(yè)面情況下新增動(dòng)態(tài)內(nèi)容。使用 PHP 和 Ajax，您可以動(dòng)態(tài)載入產(chǎn)品清單：HTML 建立一個(gè)帶有容器元素的頁(yè)面，Ajax 請(qǐng)求載入資料後將資料新增至該元素。 JavaScript 使用 Ajax 透過(guò) XMLHttpRequest 向伺服器傳送請(qǐng)求，從伺服器取得 JSON 格式的產(chǎn)品資料。 PHP 使用 MySQL 從資料庫(kù)查詢產(chǎn)品數(shù)據(jù)，並將其編碼為 JSON 格式。 JavaScript 解析 JSON 數(shù)據(jù)，並將其顯示在頁(yè)面容器中。點(diǎn)擊按鈕觸發(fā) Ajax 請(qǐng)求，載入產(chǎn)品清單。

PHP 與Ajax：建立動(dòng)態(tài)載入內(nèi)容的解決方案

簡(jiǎn)介

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

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

以下範(fàn)例示範(fàn)如何使用PHP 和Ajax 在名為「products.php」的頁(yè)面上動(dòng)態(tài)載入產(chǎn)品清單：

HTML 程式碼

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

<script>
// Ajax 請(qǐng)求函數(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ù)庫(kù)連接
$mysqli = new mysqli("hostname", "username", "password", "database");

// 從數(shù)據(jù)庫(kù)查詢產(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);
?>

#執(zhí)行範(fàn)例

##將HTML 和PHP 檔案保存在您的伺服器上。
1. 造訪「products.php」頁(yè)面。
2. 點(diǎn)選「載入」按鈕。
3. 產(chǎn)品清單將動(dòng)態(tài)載入到頁(yè)面中，而無(wú)需重新載入整個(gè)頁(yè)面。

結(jié)論

透過(guò)結(jié)合 PHP 和 Ajax，您可以建立動(dòng)態(tài)互動(dòng)網(wǎng)頁(yè)，輕鬆更新內(nèi)容而無(wú)需重新載入。這對(duì)於展示即時(shí)數(shù)據(jù)、即時(shí)聊天和其他需要定期更新數(shù)據(jù)的應(yīng)用程式至關(guān)重要。

以上是PHP 與 Ajax：建立動(dòng)態(tài)載入內(nèi)容的解決方案的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！