本文將介紹如何使用Ajax循環顯示數據庫數據。Ajax是一種可以實現異步數據交互的技術，它可以在不刷新整個頁面的情況下，加載和顯示數據。在Web開發中，我們經常需要從數據庫中獲取數據，并將其展示給用戶。以一個簡單的學生管理系統為例，我們將展示如何使用Ajax從數據庫中獲取學生信息，并將其依次顯示出來。

首先，我們需要在數據庫中創建一個學生表，表結構包含學生的姓名和年齡信息。然后，我們可以使用PHP編寫一個接口來連接數據庫，并查詢學生數據。

<?php
$dbhost = "localhost";  // 數據庫主機名
$dbuser = "root";  // 數據庫用戶名
$dbpass = "password";  // 數據庫密碼
$dbname = "student_db";  // 數據庫名
$conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
if($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$sql = "SELECT * FROM student";
$result = $conn->query($sql);
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<p>姓名：" . $row["name"]. "，年齡：" . $row["age"]. "</p>";
}
} else {
echo "<p>暫無學生信息</p>";
}
$conn->close();
?>

在上述代碼中，我們首先連接到數據庫，然后查詢學生表中的數據。如果查詢結果不為空，我們將每條學生信息都用一個<p>標簽包裹起來，并按照姓名和年齡的順序展示出來。如果查詢結果為空，我們將顯示“暫無學生信息”。

接下來，我們可以在前端使用Ajax來調用這個接口，并將獲取的學生信息顯示在頁面上。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "get_students.php",
method: "GET",
success: function(response){
$("#student-list").html(response);
}
});
});
</script>
<div id="student-list"></div>

在上述代碼中，我們首先引入了jQuery庫，然后使用$.ajax來發送GET請求到get_students.php接口。接口返回的數據會被傳遞給success回調函數，我們將獲取到的學生信息添加到id為student-list的div元素中。

當頁面加載完成后，Ajax將會自動獲取學生信息并將其展示出來。如果數據庫中有3條學生記錄，頁面上將會顯示如下結果：

姓名：張三，年齡：20
姓名：李四，年齡：21
姓名：王五，年齡：22

總結：通過以上的示例，我們學習了如何使用Ajax循環顯示數據庫數據。在后端，我們編寫了一個接口來查詢數據庫，并將查詢結果以合適的格式返回。在前端，我們使用Ajax來調用這個接口，異步獲取學生信息，并將其展示在頁面上。這種方式不僅提升了用戶體驗，還能減少不必要的頁面刷新，提高了系統的效率和性能。