PHP vs. Ajax: Solutions for creating dynamically loaded content

Ajax (Asynchronous JavaScript and XML) allows adding dynamic content without reloading the page. Using PHP and Ajax, you can dynamically load a product list: HTML creates a page with a container element to which the data is added after an Ajax request loads it. JavaScript uses Ajax to send a request to the server via XMLHttpRequest to get product data in JSON format from the server. PHP uses MySQL to query the product data from the database and encode it into JSON format. JavaScript parses the JSON data and displays it in the page container. Clicking the button triggers an Ajax request to load the product list.

PHP and Ajax: Solutions for creating dynamically loaded content

Introduction

Ajax (Asynchronous JavaScript and XML) is a powerful technology that allows adding dynamic content to web pages without reloading the entire page. This article will guide you through creating a website that loads content dynamically using PHP and Ajax.

Practical Case

The following example demonstrates how to use PHP and Ajax to dynamically load a product list on a page named "products.php":

HTML code

<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 code

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

Run the example

1. Convert HTML and PHP files are saved on your server.
2. Visit the "products.php" page.
3. Click the "Load" button.
4. The product list will be dynamically loaded into the page without reloading the entire page.

Conclusion

By combining PHP and Ajax, you can create dynamic interactive web pages that easily update content without reloading. This is critical for displaying real-time data, live chat, and other applications that require regularly updated data.

The above is the detailed content of PHP vs. Ajax: Solutions for creating dynamically loaded content. For more information, please follow other related articles on the PHP Chinese website!