PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte

Ajax (Asynchrones JavaScript und XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement, zu dem die Daten hinzugefügt werden, nachdem eine Ajax-Anfrage sie geladen hat. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um die Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP vs. Ajax: Eine Lösung zum Erstellen dynamisch geladener Inhalte

Einführung

Ajax (Asynchrones JavaScript und XML) ist eine leistungsstarke Technologie, die das Laden von Inhalten ermöglicht, ohne die gesamte Seite neu laden zu müssen Inhalte auf Webseiten. Dieser Artikel führt Sie durch die Erstellung einer Website, die Inhalte mithilfe von PHP und Ajax dynamisch lädt.

Praktischer Fall

Das folgende Beispiel zeigt, wie man mit PHP und Ajax eine Produktliste dynamisch auf eine Seite namens „products.php“ lädt:

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

Beispiel ausführen

1. Speichern Sie die HTML- und PHP-Dateien auf Ihrem Server.
2. Besuchen Sie die Seite „products.php“.
3. Klicken Sie auf die Schaltfläche „Laden“.
4. Produktlisten werden dynamisch in die Seite geladen, ohne dass die gesamte Seite neu geladen werden muss.

Fazit

Durch die Kombination von PHP und Ajax können Sie dynamische interaktive Webseiten erstellen, die Inhalte problemlos aktualisieren, ohne sie neu laden zu müssen. Dies ist entscheidend für die Anzeige von Echtzeitdaten, Live-Chat und anderen Anwendungen, die regelmäßig aktualisierte Daten erfordern.

Das obige ist der detaillierte Inhalt vonPHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!