AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上進行異步數據交互的技術。通過使用AJAX，網頁可以在不重載整個頁面的情況下與服務器進行通信，并且能夠實現動態更新數據，提升用戶體驗。其中，通過提交表單的方式來請求服務器數據是AJAX中常用的操作。本文將通過舉例說明，介紹如何使用AJAX提交表單數據。

假設有一個購物網站，用戶在填寫購買商品的數量后，點擊了“提交”按鈕，那么服務器將根據用戶輸入的商品數量，計算出總金額，并返回給用戶。這個過程可以通過AJAX來完成，使得用戶無需等待整個頁面刷新，而是實時獲取到計算后的結果。

<form id="purchase-form" action="calculate.php" method="POST">
<label for="quantity">數量：</label>
<input type="number" id="quantity" name="quantity">
<button type="submit" id="submit-btn">提交</button>
</form>
<div id="result"></div>
<script>
document.getElementById("purchase-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var xhr = new XMLHttpRequest();
xhr.open("POST", "calculate.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var formData = new FormData(this);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.send(formData);
});
</script>

上述代碼中，我們首先使用了一個表單來獲取用戶輸入的數量，表單的提交目標為"calculate.php"。當用戶點擊提交按鈕時，我們通過addEventListener方法監聽了表單的submit事件，并使用event.preventDefault()方法阻止表單默認的提交行為。同時，創建了一個XMLHttpRequest對象xhr，并通過xhr.open方法來指定請求的方法和目標地址。我們還使用了xhr.setRequestHeader方法來設置請求頭，使之告知服務器我們將發送的數據類型為表單數據。

接下來，我們將表單數據封裝成一個FormData對象，并將其作為參數傳遞給xhr.send方法。在xhr.send方法執行后，服務器會根據計算.php文件中對應的邏輯處理表單數據，并將結果返回。在這里，我們通過xhr.onreadystatechange方法來監聽服務器的響應，當readyState為XMLHttpRequest.DONE且status為200時，表示請求已經完成，并且服務器響應成功。此時，我們可以將服務器返回的結果通過xhr.responseText獲取，并將其賦值給一個特定的元素（在上例中為id為"result"的div元素），以展示給用戶。

總結來說，通過AJAX提交表單數據可以實現無刷新獲取服務器處理結果的功能。使用AJAX的好處是我們可以提供更好的用戶體驗，因為用戶無需等待整個頁面刷新，就可以即時獲取到所需信息。同時，AJAX也能減輕服務器的負擔，因為我們僅僅更新了部分頁面，而不是整個頁面。

需要注意的是，在使用AJAX提交表單數據時，需要考慮到是否需要進行表單數據的驗證和安全性的問題。對于驗證來說，可以使用HTML5的表單驗證屬性來實現前端驗證；對于安全性來說，可以在后端對表單數據進行過濾和驗證，以防止惡意攻擊。

希望通過這篇文章的介紹，您能夠理解并掌握如何使用AJAX提交表單數據，并在實際應用中取得良好的效果。AJAX的應用領域非常廣泛，并且在現代Web開發中發揮著重要的作用，希望您能夠深入學習并靈活運用它。