Ajax是一種通過異步方式向服務器發送請求并獲取響應的技術。在web開發中，常常需要將用戶輸入的表單數據提交至服務器進行處理。傳統的方式是使用表單的submit事件，并通過頁面刷新來實現數據的提交與響應。然而，使用Ajax可以在不刷新整個頁面的情況下，向服務器發送表單數據，并獲取服務器返回的響應。本文將介紹如何使用Ajax提交表單中的所有input數據，并以常見的登錄表單為例進行說明。 在一個典型的登錄表單中，通常會包含用戶名和密碼兩個輸入框。通過Ajax技術，我們可以在用戶輸入完畢后，實時將數據傳遞給服務器進行驗證。下面是一個使用Ajax提交表單數據的示例代碼：

HTML代碼：

<form id="loginForm" action="login.php" method="post">
<div>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
</div>
<div>
<input type="submit" value="登錄">
</div>
</form>

Javascript代碼：

// 獲取表單元素和提交按鈕
var loginForm = document.getElementById("loginForm");
var submitBtn = loginForm.querySelector("input[type=submit]");
// 監聽表單的submit事件
loginForm.addEventListener("submit", function(event) {
// 阻止表單的默認提交行為
event.preventDefault();
// 創建一個FormData對象
var formData = new FormData(loginForm);
// 發送Ajax請求
var xhr = new XMLHttpRequest();
xhr.open("POST", loginForm.action);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的響應數據
console.log(xhr.responseText);
}
};
xhr.send(formData);
});

在上面的代碼中，我們首先使用JavaScript獲取到表單元素和提交按鈕。接著，我們通過使用FormData對象，將表單中的所有輸入數據構建成一個鍵值對的集合。FormData對象會自動處理編碼和文件上傳等情況，簡化了數據的提交流程。 然后，我們創建一個XMLHttpRequest對象，并使用open方法指定請求的方法和URL。在此例中，我們使用了POST方法，URL為表單的action屬性值。接著，我們通過setRequestHeader方法設置請求頭部信息。根據表單的Content-Type屬性值，我們設置為"application/x-www-form-urlencoded"。 最后，我們通過send方法將構建好的FormData對象發送至服務器。當服務器返回響應時，我們通過onreadystatechange事件監聽器的回調函數，判斷Ajax請求的狀態是否為4（已完成）并且狀態碼是否為200（成功）。如果滿足條件，說明請求成功，我們可以通過xhr.responseText獲取服務器返回的數據。 通過上述代碼，我們實現了使用Ajax提交表單中的所有input數據。在現實世界的web開發中，同樣可以使用類似的方法，實現各種表單數據的提交與響應。無論是登錄表單、注冊表單還是其他更復雜的表單，Ajax都能為我們提供便利，提升用戶體驗。