1. AJAX 獲取表格數據

AJAX 通過異步請求從服務器獲取數據，并將數據動態更新到表格中。在以下示例中，我們將通過 AJAX 請求獲取用戶數據，并將其添加到上面的表格中。

$.ajax({
url: "api/users",
type: "GET",
dataType: "json",
success: function(data) {
var html = "";
data.forEach(function(user) {
html += "<tr>";
html += "<td>" + user.name + "</td>";
html += "<td>" + user.age + "</td>";
html += "<td>" + user.gender + "</td>";
html += "<td><button onclick='editUser(" + user.id + ")'>編輯</button></td>";
html += "</tr>";
});
$("#userTable").html(html);
}
});

2. AJAX 提交表單數據

通過 AJAX 提交表單數據，可以實現無刷新的表單提交。在以下示例中，我們將通過 AJAX 請求將新用戶添加到服務器，并在表格中實時顯示。

$("#addUserForm").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: "api/users",
type: "POST",
data: formData,
success: function(response) {
var newUser = response.data;
var html = "<tr>";
html += "<td>" + newUser.name + "</td>";
html += "<td>" + newUser.age + "</td>";
html += "<td>" + newUser.gender + "</td>";
html += "<td><button onclick='editUser(" + newUser.id + ")'>編輯</button></td>";
html += "</tr>";
$("#userTable").append(html);
}
});
});

3. AJAX 修改表格數據

通過 AJAX 請求，可以修改表格中已有的數據。在以下示例中，我們將通過 AJAX 請求修改用戶的年齡，并在表格中實時更新。

function editUser(userId) {
var newAge = prompt("請輸入新年齡");
$.ajax({
url: "api/users/" + userId,
type: "PUT",
data: { age: newAge },
success: function(response) {
var updatedUser = response.data;
$("#userTable").find("tr").each(function() {
var currentRow = $(this);
var currentUserId = currentRow.find("button").attr("onclick").match(/\d+/)[0];
if (currentUserId == updatedUser.id) {
currentRow.find("td:eq(1)").text(updatedUser.age);
return false;
}
});
}
});
}

4. AJAX 刪除表格數據

通過 AJAX 請求，可以刪除表格中的數據。在以下示例中，我們將通過 AJAX 請求刪除用戶，并在表格中實時更新。

function deleteUser(userId) {
if (confirm("確定要刪除該用戶嗎？")) {
$.ajax({
url: "api/users/" + userId,
type: "DELETE",
success: function() {
$("#userTable").find("tr").each(function() {
var currentRow = $(this);
var currentUserId = currentRow.find("button").attr("onclick").match(/\d+/)[0];
if (currentUserId == userId) {
currentRow.remove();
return false;
}
});
}
});
}
}

通過以上示例，我們可以看到 AJAX 在實現表格表單常用操作中的強大作用，使我們能夠實現無刷新的數據交互，提升用戶體驗。無論是獲取數據、添加數據、修改數據還是刪除數據，AJAX 都能夠輕松勝任，并且在表格中實時更新反饋給用戶。