在網頁開發中，表單的提交和數據的回顯是常見的操作需求。而使用Ajax技術，我們可以實現在不刷新整個頁面的情況下進行表單的提交，并將提交的數據動態地回顯到表格中。本文將介紹如何使用Ajax實現表單提交并回顯表格的效果。
假設我們有一個簡單的表單，其中包含姓名、年齡和性別等字段。我們希望在用戶填寫完表單后，能夠點擊提交按鈕，將數據發送到后臺進行處理，并將處理結果實時展示在頁面上的一個表格中。
首先，我們需要在HTML代碼中創建表單，如下所示：和 元素來定義表格的標題和內容。
現在，當用戶在表單中填寫完數據后，點擊提交按鈕，表單數據將通過Ajax方式發送到指定的URL進行處理，并將處理結果實時顯示在表格中。
綜上所述，通過使用Ajax技術，我們可以輕松實現表單的提交和回顯表格的功能，提升了用戶體驗和頁面的動態交互性。無論是處理用戶的留言、評論還是其他需要實時展示數據的場景，都可以借助Ajax來實現更好的效果。
<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>以上代碼創建了一個包含姓名、年齡和性別字段的表單。其中，input元素的id屬性用于在JavaScript代碼中獲取表單數據。button元素的id屬性用于綁定點擊事件。 接下來，我們需要使用JavaScript代碼來實現表單的提交和回顯效果。首先，我們為提交按鈕綁定點擊事件，并阻止表單的默認提交行為，代碼如下：
<script>
document.getElementById("submitBtn").addEventListener("click", function (e) {
e.preventDefault(); // 阻止表單的默認提交行為
submitForm(); // 調用提交表單的函數
});
function submitForm() {
var form = document.getElementById("myForm"); // 獲取表單元素
var formData = new FormData(form); // 創建FormData對象
// 使用Ajax提交表單數據
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);
// 回顯表格數據
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); // 發送表單數據
}
</script>以上代碼中，首先通過getElementById()方法獲取表單元素和表格元素。然后，創建一個FormData對象來存儲表單數據。接著，使用XMLHttpRequest對象來發送POST請求到服務器，并將FormData對象作為發送的數據。
在Ajax請求的回調函數中，首先判斷請求狀態是否成功，如果成功，則將服務器返回的響應數據解析為JSON對象。然后，通過insertRow()和insertCell()方法在表格中插入新的行和單元格，并將響應數據填充到相應的單元格中。
最后，我們需要在HTML代碼中創建一個表格，并給表格元素一個id屬性，如下所示：<table id="myTable"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <!-- 表格數據會動態顯示在這里 --> </tbody> </table>在表格代碼中，我們使用了、