Ajax是一種在Web開發中常用的技術，可以實現無需刷新整個頁面的情況下與服務器進行數據交互。在前端領域中，使用Ajax提交form表單傳值是非常常見的場景。通過Ajax，我們可以在用戶填寫完form表單并點擊提交按鈕后，將表單數據異步發送到服務器進行處理，然后將處理結果返回給用戶，而不需要刷新整個頁面。下面我們將以一個簡單的登錄表單為例，介紹如何使用Ajax提交form表單傳值。

首先，我們需要在HTML文件中創建一個form表單，其中包含需要填寫的輸入框和提交按鈕。例如：

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

上述代碼中，我們使用了ID為"loginForm"的form表單，并指定了表單提交的URL為"/login"，請求方式為POST。表單中包含了用戶名和密碼兩個輸入框，以及一個提交按鈕。

接下來，我們需要編寫JavaScript代碼，使用Ajax來處理form表單的提交。首先，我們需要監聽form表單的提交事件，并阻止表單默認的提交行為。然后，收集表單中填寫的數據，并使用Ajax將數據發送到服務器。最后，我們需要處理服務器返回的結果。以下為示例代碼：

document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單默認的提交行為
var formData = new FormData(this); // 收集表單中填寫的數據
var xhr = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xhr.open("POST", "/login", true); // 指定請求的URL和請求方式
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 處理服務器返回的結果
var response = xhr.responseText;
// 對返回的結果進行操作
}
};
xhr.send(formData); // 發送數據
});

上述代碼中，我們使用addEventListener方法監聽form表單的submit事件，并使用event.preventDefault()方法阻止表單默認的提交行為。然后，我們創建一個FormData對象formData，通過this參數將表單中填寫的數據添加到formData中。

接下來，我們創建一個XMLHttpRequest對象xhr，通過xhr.open方法指定請求的URL和請求方式（這里是POST）。同時，我們設置xhr.onreadystatechange屬性的回調函數，用于在服務器返回結果后進行處理。在回調函數中，我們首先判斷xhr對象的readyState屬性是否為4（表示請求已完成），status屬性是否為200（表示請求成功）。如果滿足條件，則說明服務器已返回結果，我們可以通過xhr.responseText獲取服務器返回的結果，并進行處理。

最后，我們使用xhr.send方法發送數據。這里的formData對象包含了表單填寫的數據，當我們調用xhr.send(formData)時，會將formData中的數據發送到服務器。

通過以上步驟，我們成功地使用Ajax提交form表單傳值，并在服務器返回結果后進行了處理。這種方式可以有效地提高用戶體驗，因為使用Ajax提交表單后，用戶無需等待整個頁面的刷新，可以立即收到服務器返回的結果。