PHP 與 Ajax：建立動態載入內容的解決方案

Ajax（非同步 JavaScript 和 XML）允許在不重新載入頁面情況下新增動態內容。使用 PHP 和 Ajax，您可以動態載入產品清單：HTML 建立一個帶有容器元素的頁面，Ajax 請求載入資料後將資料新增至該元素。 JavaScript 使用 Ajax 透過 XMLHttpRequest 向伺服器傳送請求，從伺服器取得 JSON 格式的產品資料。 PHP 使用 MySQL 從資料庫查詢產品數據，並將其編碼為 JSON 格式。 JavaScript 解析 JSON 數據，並將其顯示在頁面容器中。點擊按鈕觸發 Ajax 請求，載入產品清單。

PHP 與Ajax：建立動態載入內容的解決方案

簡介

Ajax（非同步JavaScript 和XML）是一種強大的技術，允許在不重新載入整個頁面的情況下為網頁添加動態內容。本文將指導您使用 PHP 和 Ajax 建立一個動態載入內容的網站。

實戰案例

以下範例示範如何使用PHP 和Ajax 在名為「products.php」的頁面上動態載入產品清單：

HTML 程式碼

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

<script>
// Ajax 请求函数
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();
}

// 显示产品函数
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);
    }
}

// 加载按钮点击事件
document.getElementById("load-button").addEventListener("click", loadProducts);
</script>

PHP 程式碼

<?php
// get_products.php

// 数据库连接
$mysqli = new mysqli("hostname", "username", "password", "database");

// 从数据库查询产品
$query = "SELECT * FROM products";
$result = $mysqli->query($query);

// 将结果转换为 JSON 格式
$products = array();
while ($row = $result->fetch_assoc()) {
    $products[] = $row;
}

echo json_encode($products);
?>

#執行範例

##將HTML 和PHP 檔案保存在您的伺服器上。
1. 造訪「products.php」頁面。
2. 點選「載入」按鈕。
3. 產品清單將動態載入到頁面中，而無需重新載入整個頁面。

結論

以上是PHP 與 Ajax：建立動態載入內容的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！