AJAX (Asynchronous JavaScript and XML) 是一種無需刷新整個網頁的技術，通過異步請求與服務器進行數據交互。在Web開發中，我們常常需要通過表單向服務器提交數據。本文將介紹如何使用 AJAX 發送 FormData 數據，實現無刷新提交表單的效果。

假設我們有一個簡單的表單，包含姓名和年齡兩個輸入框，如下所示：

<form id="myForm"><input type="text" name="name" placeholder="姓名" /><input type="number" name="age" placeholder="年齡" /><button type="submit">提交</button></form>

我們的目標是在用戶點擊提交按鈕后，使用 AJAX 將表單數據提交到服務器，并在不刷新頁面的情況下接收服務器的響應。

為了實現這個目標，我們首先需要使用 JavaScript 監聽表單的提交事件，并阻止默認的表單提交行為。

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止默認的表單提交行為
// 繼續處理表單數據...
});

接下來，我們構建一個 FormData 對象，用于存儲表單數據。

var formData = new FormData(form);

FormData 對象可以自動將表單字段的 name 和 value 組合起來，作為數據的鍵值對。在這個例子中，FormData 對象將包含兩個鍵值對：{"name": "用戶輸入的姓名", "age": "用戶輸入的年齡"}。

完成 FormData 對象的構建后，我們可以使用 AJAX 發送這些數據到服務器。以下是一個使用原生 JavaScript 實現的發送 AJAX 請求的示例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "/submit", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 服務器響應成功
console.log(xhr.responseText);
}
};
xhr.send(formData);

在這個示例中，我們通過XMLHttpRequest()創建一個 XMLHttpRequest 對象，并使用open()方法設置請求的方法、URL 和異步標識。然后，我們給 onreadystatechange 事件添加一個監聽器，以便在服務器響應返回時進行處理。最后，我們使用send()方法發送 FormData 數據到服務器。

當收到來自服務器的響應時，在xhr.onreadystatechange回調函數中，我們可以使用responseText屬性訪問服務器的響應數據。

除了原生的 XMLHttpRequest 對象，我們還可以使用各種 JavaScript 框架、庫來簡化 AJAX 請求的實現。例如，使用 jQuery 的 AJAX 方法可以更簡便地實現相同的功能：

$.ajax({
url: "/submit",
type: "POST",
data: formData,
success: function(response) {
// 服務器響應成功
console.log(response);
}
});

這個示例中，我們使用 jQuery 的 AJAX 方法，只需提供一個包含 URL、請求類型、數據和成功處理函數的對象即可。

綜上所述，通過使用 AJAX 發送 FormData 數據，我們可以實現在不刷新頁面的情況下提交表單，并與服務器進行數據交互。這種方式可以提供更好的用戶體驗，同時減少頁面的刷新次數，提高網站性能。