本文主要介紹了如何使用 Ajax 循環遍歷數據庫數據。Ajax 是一種能夠實現無刷新更新頁面的技術，可以通過發送異步請求來獲取數據并實時更新頁面內容。在本文中，我們將通過一個簡單的示例來演示如何使用 Ajax 循環遍歷數據庫數據。
示例：展示員工列表
假設我們有一個員工數據庫，其中包含了所有公司員工的信息，包括姓名、職位和薪水。我們希望能夠通過一個頁面來展示員工列表，并實現每隔一段時間更新一次員工信息。
HTML 結構
<!DOCTYPE html> <html> <head> <title>員工列表</title> </head> <body> <div id="employeeList"></div> </body> </html>
Ajax 請求和響應
var employeeList = document.getElementById('employeeList');
function getEmployees() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var employees = JSON.parse(xhr.responseText);
displayEmployees(employees);
}
};
xhr.open('GET', 'get_employees.php', true);
xhr.send();
}
function displayEmployees(employees) {
var html = '';
employees.forEach(function(employee) {
html += '<p>' + employee.name + ' - ' + employee.position + ' - ' + employee.salary + '</p>';
});
employeeList.innerHTML = html;
}
// 每隔 5 秒更新一次員工列表
setInterval(getEmployees, 5000);在上述代碼中，我們首先獲取了一個用于展示員工列表的 DOM 元素<div id="employeeList">。然后定義了一個函數getEmployees，它使用了 XMLHttpRequest 對象來發送 GET 請求到服務器（通過指定的 URL）獲取員工數據。當響應成功返回后，我們通過調用displayEmployees函數來顯示員工列表。
在displayEmployees函數中，我們使用了 JavaScript 的forEach方法遍歷員工數組，并構建包含員工信息的 HTML 字符串。最后，我們將生成的 HTML 字符串賦值給employeeList元素的innerHTML屬性，從而更新員工列表的內容。
最后，我們使用setInterval函數設置了一個定時器，每隔 5 秒鐘就會調用一次getEmployees函數來更新員工列表。
結論
通過以上示例，我們成功地演示了如何使用 Ajax 循環遍歷數據庫數據。使用 Ajax 技術可以使我們實現無刷新更新頁面的效果，同時也便于對數據庫進行動態交互操作。希望本文能夠對您有所幫助。