PHP 与 Ajax：创建动态加载内容的解决方案-php教程-PHP中文网

PHP 与 Ajax：创建动态加载内容的解决方案

PHPz

发布： 2024-05-11 13:48:01

原创

979人浏览过

ajax（异步 javascript 和 xml）允许在不重新加载页面情况下添加动态内容。使用 php 和 ajax，您可以动态加载产品列表：html 创建一个带有容器元素的页面，ajax 请求加载数据后将数据添加到该元素中。javascript 使用 ajax 通过 xmlhttprequest 向服务器发送请求，从服务器获取 json 格式的产品数据。php 使用 mysql 从数据库查询产品数据，并将其编码为 json 格式。javascript 解析 json 数据，并将其显示在页面容器中。点击按钮触发 ajax 请求，加载产品列表。

PHP 与 Ajax：创建动态加载内容的解决方案

PHP 与 Ajax：创建动态加载内容的解决方案

简介

Ajax（异步 JavaScript 和 XML）是一种强大的技术，允许在不重新加载整个页面的情况下向网页添加动态内容。本文将指导您使用 PHP 和 Ajax 创建一个动态加载内容的网站。

立即学习“PHP免费学习笔记（深入）”；

实战案例

以下示例演示如何使用 PHP 和 Ajax 在名为「products.php」的页面上动态加载产品列表：

PHP经典实例(第二版)

PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We

453

查看详情

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

登录后复制

运行示例