Ajax（Asynchronous JavaScript and XML，異步的 JavaScript 和 XML）是一種用于在后臺與服務器進行數據交換的技術。通過使用 Ajax，用戶可以在不重新加載整個網頁的情況下發送和接收數據。在網頁表單中使用 Ajax 實現數據的提交和回顯，可以提供更好的用戶體驗和數據交互的效率。本文將介紹如何使用 Ajax 實現表單提交并回顯的功能，并給出相應的代碼示例。
在實際開發中，我們經常會遇到需要用戶填寫表單并提交的需求。傳統的方式是用戶填寫完表單后點擊提交按鈕，頁面會重新加載并顯示提交后的結果。這種方式在用戶體驗上存在一定的問題，用戶需要等待頁面重新加載，并且丟失了之前填寫的數據。而使用 Ajax 方式提交表單可以解決這些問題。用戶填寫完表單后，通過 Ajax 將表單數據異步發送給服務器，服務器處理完數據后返回相應的結果，頁面上的數據可以實時更新而不需要重新加載整個頁面。
一種常見的應用場景是登錄表單的提交。用戶填寫用戶名和密碼后，點擊登錄按鈕，后臺服務器會驗證用戶名和密碼是否正確，并返回相應的驗證結果。在傳統的方式中，用戶點擊登錄按鈕后頁面會重新加載，用戶需要等待頁面的重新加載并且丟失之前填寫的數據。而使用 Ajax 方式提交表單，用戶填寫完表單后通過 Ajax 將表單數據發送給服務器，服務器驗證用戶名和密碼并返回驗證結果，頁面上的提示信息可以實時更新而不需要重新加載整個頁面。
下面是一個實現登錄表單提交并回顯的示例代碼：
`
HTML 代碼：

<form id="loginForm" action="/login" method="post">
<input type="text" name="username" placeholder="請輸入用戶名">
<input type="password" name="password" placeholder="請輸入密碼">
<button type="button" onclick="submitForm()">登錄</button>
</form>
<div id="message"></div>

JavaScript 代碼：

function submitForm() {
var form = document.getElementById("loginForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/login");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if(response.success) {
// 登錄成功
document.getElementById("message").innerHTML = "登錄成功";
} else {
// 登錄失敗
document.getElementById("message").innerHTML = "用戶名或密碼錯誤";
}
}
}
xhr.send(formData);
}

在上述代碼中，我們使用 JavaScript 獲取表單元素和數據，并通過 XMLHttpRequest 對象創建一個異步的請求。然后，我們監聽請求狀態的變化，當請求狀態變為 4（已完成）且響應狀態碼為 200（成功）時，我們解析服務器返回的響應數據，并根據響應數據的結果更新頁面上的提示信息。
可以看到，使用 Ajax 方式提交表單并回顯數據非常簡單。通過監聽 HTTP 請求的異步狀態變化，我們可以靈活地處理服務器返回的數據，并實時更新頁面的內容。這樣，用戶填寫表單后可以立即看到提交結果，避免了傳統方式中需要重新加載整個頁面的等待時間，提升了用戶體驗和數據交互的效率。
總之，使用 Ajax 實現表單提交并回顯能夠提供更好的用戶體驗和數據交互效率。通過監聽異步請求的狀態變化，我們可以在不重新加載整個頁面的情況下實現表單數據的提交和服務器返回結果的回顯。無論是登錄表單還是其他類型的表單，使用 Ajax 方式提交可以為用戶提供更好的交互體驗。