Ajax（Asynchronous JavaScript and XML）是一種在網頁上進行異步數據交互的技術，它可以使網頁在不刷新整個頁面的情況下更新部分內容。在表格數據更新的方面，Ajax可以提供一種靈活而且高效的方式。本文將通過舉例說明，介紹如何使用Ajax更新表格數據。

假設我們有一個學生成績表格，包含學生的姓名和各個科目的成績。我們希望能夠動態地向表格中添加新的學生成績，而不需要刷新整個頁面。通過Ajax，可以實現這個需求。

首先，我們需要在頁面中使用Ajax來監聽添加學生成績的事件。這可以使用JavaScript來實現，我們可以使用jQuery庫來簡化代碼：

$(document).ready(function() {
// 監聽添加學生成績按鈕的點擊事件
$('#add-score-button').click(function(e) {
e.preventDefault();
// 獲取輸入的學生姓名和成績
var name = $('#student-name-input').val();
var score = $('#student-score-input').val();
// 發送Ajax請求，將學生姓名和成績發送到后臺處理
$.ajax({
url: 'add_score.php',
method: 'POST',
data: { name: name, score: score },
success: function(response) {
// 添加成功后，更新表格數據
updateTable(response);
}
});
});
});
function updateTable(response) {
// 將返回的數據解析為JSON格式
var data = JSON.parse(response);
// 遍歷數據，動態地將學生成績添加到表格中
data.forEach(function(item) {
var row = '<tr><td>' + item.name + '</td><td>' + item.score + '</td></tr>';
$('#student-table').append(row);
});
}

在上面的代碼中，我們首先監聽添加學生成績按鈕的點擊事件。當用戶點擊按鈕時，我們獲取用戶輸入的學生姓名和成績，并通過Ajax將這些數據發送到后臺進行處理。如果后臺成功添加學生成績，它會返回更新后的學生成績數據。我們在成功回調函數中調用了updateTable函數，該函數將返回的數據解析為JSON格式，并根據數據動態地更新表格中的內容。

在后臺，我們需要創建一個用于處理添加學生成績的接口。這可以是一個PHP文件，名為add_score.php，代碼如下：

// 獲取POST請求中發送的學生姓名和成績
$name = $_POST['name'];
$score = $_POST['score'];
// 將學生姓名和成績添加到數據庫中
// 這里只是一個示例，實際情況需要根據具體的業務邏輯來處理
// 成功添加后，返回更新后的學生成績數據
$response = [
['name' => $name, 'score' => $score]
];
// 將數據轉換為JSON格式并發送回前臺
echo json_encode($response);

在上面的代碼中，我們首先從POST請求中獲取發送的學生姓名和成績，然后將其添加到數據庫中（這里只是一個示例，實際情況需要根據具體的業務邏輯來處理）。之后，我們構建一個包含更新后的學生成績數據的數組，并將其轉換為JSON格式，最后將其發送回前臺。

通過上述的代碼示例，我們可以看到，通過使用Ajax，我們可以實現表格數據的動態更新，而不需要刷新整個頁面。這種技術可以提高用戶體驗，使應用更加靈活和高效。