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

// 加载按钮<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/39702.html" target="_blank">点击事件</a>
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：创建动态加载内容的解决方案的详细内容，更多请关注编程网其它相关文章！