AJAX（Asynchronous JavaScript and XML）是一種在網頁上實現異步數據交互的技術。它能夠實現在不重新加載整個網頁的情況下，動態更新部分頁面內容。在開發中，經常需要動態地向表格中添加數據。本文將介紹如何使用Ajax來實現動態添加表格數據，并通過舉例說明其用法和效果。在HTML頁面中，我們可以創建一個空的表格，然后通過Ajax請求從服務器獲取數據，并在頁面中動態添加到表格中。假設我們需要顯示一個學生信息列表的表格，其中包括學生的姓名、年齡和性別。我們可以通過以下示例來實現：首先，我們需要在HTML頁面中創建一個空的表格：
<table id="studentTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
</tbody>
</table>var table = document.getElementById("studentTable");
var tbody = table.getElementsByTagName("tbody")[0];
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
for (var i = 0; i< data.length; i++) {
var row = document.createElement("tr");
row.innerHTML = "<td>" + data[i].name + "</td>" +
"<td>" + data[i].age + "</td>" +
"<td>" + data[i].gender + "</td>";
tbody.appendChild(row);
}
}
};
xhr.send();[
{
"name": "張三",
"age": 20,
"gender": "男"
},
{
"name": "李四",
"age": 19,
"gender": "女"
},
{
"name": "王五",
"age": 21,
"gender": "男"
}
]