在網頁開發中，我們經常需要從數據庫中獲取數據并在頁面上進行展示。而使用Ajax技術可以實現在不刷新整個頁面的情況下，通過異步請求從服務器獲取數據并更新頁面內容。本文將詳細介紹如何使用Ajax從數據庫中循環取出數據，并通過舉例來說明其具體操作步驟和實現原理。 假設我們有一個電商網站，需要在主頁上展示最新的商品信息。這些商品信息存儲在數據庫中，我們需要通過Ajax從數據庫中逐條取出數據，并在頁面上展示出來。首先，我們需要在頁面中創建一個用于展示商品信息的容器，比如一個div元素，其id為"product-container"。我們可以通過以下HTML代碼完成這一步驟：

<div id="product-container"></div>

接下來，我們需要在JavaScript中使用Ajax技術從數據庫中取出數據。我們可以通過創建一個XMLHttpRequest對象來實現這個目標。以下是使用原生JavaScript實現的Ajax代碼示例：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
var productContainer = document.getElementById("product-container");
for (var i = 0; i < response.length; i++) {
var product = response[i];
var productItem = document.createElement("div");
productItem.innerHTML = "<h3>" + product.name + "</h3><p>" + product.description + "</p>";
productContainer.appendChild(productItem);
}
}
};
xmlhttp.open("GET", "get-products.php", true);
xmlhttp.send();

上述代碼首先創建了一個XMLHttpRequest對象，并設置其onreadystatechange事件處理函數。當服務器返回響應時，該處理函數將被觸發。在處理函數中，我們首先將服務器返回的響應數據解析為JSON格式，并獲取到商品信息數組。然后，我們遍歷商品信息數組，并創建相應的HTML元素并添加到"product-container"容器中。 上述代碼中的get-products.php是一個用于從數據庫中取出商品信息的服務器端腳本。該腳本應該返回一個包含商品信息的JSON格式的響應。以下是一個get-products.php的示例代碼：

<?php
// 連接到數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 從數據庫中獲取商品信息
$sql = "SELECT name, description FROM products";
$result = $conn->query($sql);
$response = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$product = array(
"name" => $row["name"],
"description" => $row["description"]
);
array_push($response, $product);
}
}
// 返回響應數據
header("Content-Type: application/json");
echo json_encode($response);
$conn->close();
?>

上述代碼首先連接到數據庫，并執行一個查詢操作以獲取所有商品的名稱和描述。然后，將查詢結果封裝為一個數組，并將其以JSON格式返回給客戶端。 通過以上的代碼示例，我們成功地實現了使用Ajax從數據庫中循環取出數據，并在頁面上展示的功能。無論商品信息有多少條，我們都可以通過這種方式從數據庫中逐條獲取，并在頁面上進行展示。這樣，我們的網頁就可以動態地展示最新的商品信息，提升用戶體驗。