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

运行示例

1. 将 HTML 和 PHP 文件保存在您的服务器上。
2. 访问「products.php」页面。
3. 点击「加载」按钮。
4. 产品列表将动态加载到页面中，而无需重新加载整个页面。

结论

通过结合 PHP 和 Ajax，您可以创建动态交互式网页，轻松更新内容而无需重新加载。这对于展示实时数据、实时聊天和其他需要定期更新数据的应用程序至关重要。

以上是PHP 与 Ajax：创建动态加载内容的解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！