如今，隨著互聯網的快速發展，越來越多的網站開始使用AJAX來提高用戶的交互體驗。而在網站的表單驗證中，AJAX也起到了很大的作用。本文將介紹如何使用AJAX來提交表單，并實時驗證用戶的輸入。

假設我們有一個登錄表單，包含用戶名和密碼的輸入框，以及一個提交按鈕。在傳統的方式下，當用戶點擊提交按鈕后，表單會提交到服務器進行驗證。如果驗證失敗，服務器會返回錯誤信息，頁面會重新加載，用戶需要重新輸入數據。這樣的體驗對用戶來說是非常不友好的。而使用AJAX提交表單，我們可以在不刷新頁面的情況下進行實時的驗證和錯誤提示。

首先，我們需要在HTML中設置一個表單，包含用戶名和密碼的輸入框以及一個提交按鈕。

<form id="loginForm" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="登錄">
</form>

接下來，我們需要編寫JavaScript代碼來處理表單的提交和驗證。

<script>
// 表單提交處理函數
function submitForm() {
// 獲取表單數據
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的結果
var response = JSON.parse(xhr.responseText);
if (response.success) {
// 登錄成功
alert("登錄成功！");
} else {
// 登錄失敗，顯示錯誤信息
alert(response.message);
}
}
};
// 將表單數據發送到服務器
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
}
// 添加表單提交事件監聽器
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單提交
submitForm();
});
</script>

在上面的代碼中，我們首先定義了一個名為submitForm的函數來處理表單的提交。該函數通過AJAX發送一個POST請求到服務器的/login路徑，并將輸入框中的用戶名和密碼作為請求參數。服務器返回的結果將被解析為JSON對象，判斷登錄是否成功。如果成功，彈出“登錄成功”的提示框，否則彈出錯誤信息。

接著，我們使用addEventListener方法來給表單添加一個提交事件的監聽器。在監聽器函數中，我們調用submitForm函數來處理表單的提交，并通過preventDefault方法來阻止表單的默認提交行為。

通過上述代碼，我們實現了一個使用AJAX來提交表單并進行實時驗證的登錄界面。當用戶輸入用戶名和密碼后，點擊提交按鈕即可在不刷新頁面的情況下進行登錄驗證，并根據服務器的返回結果給予對應的提示。

當然，上述代碼僅僅是一個簡單的示例，并沒有包含所有可能出現的情況。在實際應用中，我們需要結合具體的需求來進行相關的修改和完善。但是通過這個簡單的例子，我們可以看到使用AJAX提交表單能夠提供良好的用戶體驗，減少頁面的刷新操作，實時進行驗證，并給出及時的提示。