AJAX（Asynchronous JavaScript and XML）是一種在客戶端和服務器之間進行異步數據交互的技術。它的出現極大地改變了網頁的交互方式，提供了更加流暢和高效的用戶體驗。在Web開發中，經常會遇到需要用戶填寫一張表格并提交的情況。本文將以一個實例來介紹如何使用AJAX提交表格數據，并展示如何通過AJAX返回服務器返回的結果。 假設我們有一個學生成績管理系統，管理員需要錄入每位學生的成績，并將其提交到服務器進行保存。首先，我們需要一個包含學生信息的表格，該表格包含學生的姓名、學號、科目等內容。在用戶填寫完表格后，點擊提交按鈕，表格數據將會通過AJAX異步提交到服務器，服務器將對數據進行處理并返回結果給用戶。下面將逐步介紹如何實現這個功能。 首先，我們需要在HTML頁面中創建一個表格，如下所示：

<table id="studentTable">
<tr>
<th>姓名</th>
<th>學號</th>
<th>科目</th>
</tr>
<tr>
<td><input type="text" name="name"></td>
<td><input type="text" name="studentId"></td>
<td><input type="text" name="subject"></td>
</tr>
</table>
<button onclick="submitForm()">提交</button>

以上代碼是一個基本的HTML表格，其中每行（除表頭外）對應一個學生的信息。我們使用`input`標簽來接收用戶的輸入。在表格之后，有一個提交按鈕，當用戶點擊該按鈕時，將調用JavaScript中的`submitForm`函數來提交表格數據。 接下來，我們需要編寫JavaScript代碼來實現AJAX提交表格數據的功能。首先，我們需要定義一個函數`submitForm`，如下所示：

<script>
function submitForm() {
var name = document.getElementsByName("name")[0].value;
var studentId = document.getElementsByName("studentId")[0].value;
var subject = document.getElementsByName("subject")[0].value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/save", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("提交成功！");
} else {
alert("提交失敗，請稍后再試。");
}
} else {
alert("請求失?。? + xhr.status);
}
}
};
var data = {
"name": name,
"studentId": studentId,
"subject": subject
};
xhr.send(JSON.stringify(data));
}
</script>

以上代碼中，我們首先獲取用戶在表格中輸入的值，然后創建一個`XMLHttpRequest`對象，用于發送AJAX請求。我們使用`open`方法指定請求的類型、URL和是否異步。接下來，使用`setRequestHeader`方法設置請求頭，告訴服務器請求體的類型為JSON格式。 然后，通過`onreadystatechange`事件監聽請求的狀態變化，在請求完成后進行處理。如果請求成功（狀態碼為200），則解析服務器返回的JSON數據，并根據返回結果進行相應的操作。如果提交成功，則彈出提示框顯示“提交成功！”；如果提交失敗，則彈出提示框顯示“提交失敗，請稍后再試。”。如果請求失敗，則彈出提示框顯示請求的狀態碼。 最后，我們將表格數據組織成JSON格式，并通過`send`方法發送給服務器。 通過以上代碼，當用戶點擊提交按鈕后，表格數據將會通過AJAX方式發送給服務器，并根據服務器的響應結果給予相應的提示。這樣，用戶可以在不刷新網頁的情況下完成數據的提交，提升了用戶的體驗。 總結起來，AJAX提交表格數據是一種使用AJAX技術實現的高效且優雅的方式。通過整合JavaScript和服務器端的處理邏輯，用戶可以方便地在網頁上完成數據提交，并得到服務器返回的結果。無論是學生成績管理系統還是其他需要表格數據提交的場景，AJAX都提供了一種便捷的解決方案。