在網(wǎng)頁開發(fā)中，表單的提交和數(shù)據(jù)的回顯是常見的操作需求。而使用Ajax技術(shù)，我們可以實現(xiàn)在不刷新整個頁面的情況下進行表單的提交，并將提交的數(shù)據(jù)動態(tài)地回顯到表格中。本文將介紹如何使用Ajax實現(xiàn)表單提交并回顯表格的效果。 假設(shè)我們有一個簡單的表單，其中包含姓名、年齡和性別等字段。我們希望在用戶填寫完表單后，能夠點擊提交按鈕，將數(shù)據(jù)發(fā)送到后臺進行處理，并將處理結(jié)果實時展示在頁面上的一個表格中。 首先，我們需要在HTML代碼中創(chuàng)建表單，如下所示：

<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡：</label>
<input type="text" id="age" name="age"><br>
<label for="gender">性別：</label>
<input type="radio" id="male" name="gender" value="男">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="女">
<label for="female">女</label><br>
<button type="submit" id="submitBtn">提交</button>
</form>

以上代碼創(chuàng)建了一個包含姓名、年齡和性別字段的表單。其中，input元素的id屬性用于在JavaScript代碼中獲取表單數(shù)據(jù)。button元素的id屬性用于綁定點擊事件。 接下來，我們需要使用JavaScript代碼來實現(xiàn)表單的提交和回顯效果。首先，我們?yōu)樘峤话粹o綁定點擊事件，并阻止表單的默認(rèn)提交行為，代碼如下：

<script>
document.getElementById("submitBtn").addEventListener("click", function (e) {
e.preventDefault(); // 阻止表單的默認(rèn)提交行為
submitForm(); // 調(diào)用提交表單的函數(shù)
});
function submitForm() {
var form = document.getElementById("myForm"); // 獲取表單元素
var formData = new FormData(form); // 創(chuàng)建FormData對象
// 使用Ajax提交表單數(shù)據(jù)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/submit", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 回顯表格數(shù)據(jù)
var table = document.getElementById("myTable");
var newRow = table.insertRow(table.rows.length);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = response.name;
cell2.innerHTML = response.age;
cell3.innerHTML = response.gender;
}
};
xhr.send(formData); // 發(fā)送表單數(shù)據(jù)
}
</script>

以上代碼中，首先通過getElementById()方法獲取表單元素和表格元素。然后，創(chuàng)建一個FormData對象來存儲表單數(shù)據(jù)。接著，使用XMLHttpRequest對象來發(fā)送POST請求到服務(wù)器，并將FormData對象作為發(fā)送的數(shù)據(jù)。 在Ajax請求的回調(diào)函數(shù)中，首先判斷請求狀態(tài)是否成功，如果成功，則將服務(wù)器返回的響應(yīng)數(shù)據(jù)解析為JSON對象。然后，通過insertRow()和insertCell()方法在表格中插入新的行和單元格，并將響應(yīng)數(shù)據(jù)填充到相應(yīng)的單元格中。 最后，我們需要在HTML代碼中創(chuàng)建一個表格，并給表格元素一個id屬性，如下所示：

<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<!-- 表格數(shù)據(jù)會動態(tài)顯示在這里 -->
</tbody>
</table>

在表格代碼中，我們使用了、和元素來定義表格的標(biāo)題和內(nèi)容。 現(xiàn)在，當(dāng)用戶在表單中填寫完數(shù)據(jù)后，點擊提交按鈕，表單數(shù)據(jù)將通過Ajax方式發(fā)送到指定的URL進行處理，并將處理結(jié)果實時顯示在表格中。 綜上所述，通過使用Ajax技術(shù)，我們可以輕松實現(xiàn)表單的提交和回顯表格的功能，提升了用戶體驗和頁面的動態(tài)交互性。無論是處理用戶的留言、評論還是其他需要實時展示數(shù)據(jù)的場景，都可以借助Ajax來實現(xiàn)更好的效果。