AJAX（Asynchronous JavaScript and XML）是一種在客戶端和服務(wù)器之間進(jìn)行異步數(shù)據(jù)交互的技術(shù)。它的出現(xiàn)極大地改變了網(wǎng)頁(yè)的交互方式，提供了更加流暢和高效的用戶體驗(yàn)。在Web開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要用戶填寫一張表格并提交的情況。本文將以一個(gè)實(shí)例來(lái)介紹如何使用AJAX提交表格數(shù)據(jù)，并展示如何通過(guò)AJAX返回服務(wù)器返回的結(jié)果。
假設(shè)我們有一個(gè)學(xué)生成績(jī)管理系統(tǒng)，管理員需要錄入每位學(xué)生的成績(jī)，并將其提交到服務(wù)器進(jìn)行保存。首先，我們需要一個(gè)包含學(xué)生信息的表格，該表格包含學(xué)生的姓名、學(xué)號(hào)、科目等內(nèi)容。在用戶填寫完表格后，點(diǎn)擊提交按鈕，表格數(shù)據(jù)將會(huì)通過(guò)AJAX異步提交到服務(wù)器，服務(wù)器將對(duì)數(shù)據(jù)進(jìn)行處理并返回結(jié)果給用戶。下面將逐步介紹如何實(shí)現(xiàn)這個(gè)功能。
首先，我們需要在HTML頁(yè)面中創(chuàng)建一個(gè)表格，如下所示：
<table id="studentTable">
<tr>
<th>姓名</th>
<th>學(xué)號(hào)</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><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("提交失敗，請(qǐng)稍后再試。");
}
} else {
alert("請(qǐng)求失敗：" + xhr.status);
}
}
};
var data = {
"name": name,
"studentId": studentId,
"subject": subject
};
xhr.send(JSON.stringify(data));
}
</script>