在現代Web應用程序中，動態獲取數據并將其填充到表格中是一種常見的需求。通過使用Ajax，我們可以實現在無需刷新整個頁面的情況下，從服務器獲取數據并將其展示在用戶面前。本文將探討如何使用Ajax獲取數據，并將其填入表格中。通過以下示例，您將了解如何實現這一功能。

第一步：創建表格

首先，我們需要創建要填充數據的表格。以下是一個簡單的表格示例：

<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>職業</th>
</tr>
</thead>
<tbody></tbody>
</table>

該表格包含一個和標簽，其中用于定義表格的標題行，用于放置我們獲取到的數據。

第二步：創建AJAX請求

我們將使用JavaScript的XMLHttpRequest對象來發送異步請求獲取數據。以下是一個使用Ajax獲取數據的示例：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
populateTable(data);
}
};
xmlhttp.open("GET", "data.json", true);
xmlhttp.send();

上述代碼中，我們監聽了XMLHttpRequest對象的onreadystatechange事件。當請求的狀態改變時，我們檢查狀態是否為4（即請求已完成），并且狀態碼是否為200（即請求成功）。如果是，則解析服務器返回的JSON數據，并調用populateTable函數填充表格。

第三步：填充表格

接下來，我們需要編寫populateTable函數來將數據填充到表格中：

function populateTable(data) {
var tableBody = document.querySelector("#myTable tbody");
tableBody.innerHTML = "";
data.forEach(function(rowData) {
var row = document.createElement("tr");
rowData.forEach(function(cellData) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cellData));
row.appendChild(cell);
});
tableBody.appendChild(row);
});
}

在該函數中，我們首先獲取到元素，并將其內部內容置為空字符串。然后，我們使用forEach循環遍歷data數組中的每一行數據，并為每個單元格創建一個元素，并將數據填充到其中。最后，我們將每一行添加到表格中。

總結

通過使用Ajax來獲取數據填充表格，我們能夠實現在不刷新整個頁面的情況下，動態地更新表格內容。上述示例展示了整個過程，包括創建表格、發送Ajax請求、以及將數據填充到表格的步驟。希望本文能夠幫助讀者了解如何使用Ajax來實現這一常見功能。