PHP vs Ajax : solutions pour créer du contenu chargé dynamiquement

Ajax (Asynchronous JavaScript et XML) permet d'ajouter du contenu dynamique sans recharger la page. En utilisant PHP et Ajax, vous pouvez charger dynamiquement une liste de produits : HTML crée une page avec un élément conteneur auquel les données sont ajoutées après le chargement d'une requête Ajax. JavaScript utilise Ajax pour envoyer une requête au serveur via XMLHttpRequest afin d'obtenir les données produit au format JSON à partir du serveur. PHP utilise MySQL pour interroger les données produit de la base de données et les encoder au format JSON. JavaScript analyse les données JSON et les affiche dans le conteneur de pages. Cliquer sur le bouton déclenche une requête Ajax pour charger la liste de produits.

PHP vs. Ajax : Une solution pour créer du contenu chargé dynamiquement

Introduction

Ajax (JavaScript asynchrone et XML) est une technologie puissante qui permet de charger du contenu sans recharger la page entière. Ajouter de la dynamique. contenu aux pages Web. Cet article vous guidera dans la création d'un site Web qui charge le contenu de manière dynamique à l'aide de PHP et Ajax.

Cas pratique

L'exemple suivant montre comment utiliser PHP et Ajax pour charger dynamiquement une liste de produits sur une page nommée "products.php" :

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

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

Exemple d'exécution

1. Enregistrez les fichiers HTML et PHP sur votre serveur.
2. Visitez la page "products.php".
3. Cliquez sur le bouton "Charger".
4. Les listes de produits seront chargées dynamiquement dans la page sans recharger la page entière.

Conclusion

En combinant PHP et Ajax, vous pouvez créer des pages Web interactives dynamiques qui mettent facilement à jour le contenu sans recharger. Ceci est crucial pour afficher des données en temps réel, le chat en direct et d'autres applications nécessitant des données régulièrement mises à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!