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);
?>
登录后复制
运行示例
- 将 HTML 和 PHP 文件保存在您的服务器上。
- 访问「products.php」页面。
- 点击「加载」按钮。
- 产品列表将动态加载到页面中，而无需重新加载整个页面。
结论
通过结合 PHP 和 Ajax，您可以创建动态交互式网页，轻松更新内容而无需重新加载。这对于展示实时数据、实时聊天和其他需要定期更新数据的应用程序至关重要。
以上就是PHP 与 Ajax：创建动态加载内容的解决方案的详细内容，更多请关注php中文网其它相关文章！