AJAX是一種Web開發技術，它可以在不刷新整個頁面的情況下，與服務器進行異步通信。這使得網頁能夠更加動態和交互。在表單提交方面，使用AJAX可以以JSON格式將表單數據發送到服務器，并接收服務器返回的數據，而無需刷新整個頁面。這種技術在現代網站開發中非常常見，它為用戶提供了更好的體驗。

假設我們有一個簡單的用戶登錄表單，包括用戶名和密碼。當用戶點擊“登錄”按鈕時，我們希望通過AJAX將表單中的數據發送到服務器進行驗證，然后根據服務器的響應結果，在頁面上顯示相應的消息。

<form id="loginForm" method="post">
<input type="text" id="username" name="username" />
<input type="password" id="password" name="password" />
<input type="button" value="登錄" onclick="submitForm()" />
</form>
<div id="message"></div>

在上面的代碼中，我們使用id為“loginForm”的表單。表單包含兩個輸入字段，分別是用戶名和密碼。此外，還有一個提交按鈕，并指定了一個onclick事件處理函數submitForm()。最后，我們在頁面上用一個空的div元素顯示消息。

接下來，我們將編寫一個JavaScript函數submitForm()，用于處理表單的提交操作，并使用AJAX發送表單數據到服務器。

function submitForm() {
var form = document.getElementById("loginForm");
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var messageDiv = document.getElementById("message");
if (response.success) {
messageDiv.innerHTML = "登錄成功！";
} else {
messageDiv.innerHTML = "用戶名或密碼錯誤！";
}
}
};
var jsonData = {
username: formData.get("username"),
password: formData.get("password")
};
xhr.send(JSON.stringify(jsonData));
}

在上述代碼中，首先獲取了表單的DOM元素，并使用FormData對象將表單數據包裝起來。然后創建一個XMLHttpRequest對象，使用POST方法將請求發送到“login.php”。在請求頭部設置Content-type為“application/json”，以告訴服務器我們將發送JSON格式的數據。

隨后，我們定義了一個onreadystatechange事件處理函數，用于在AJAX請求狀態改變時執行相應的操作。在狀態為4（請求已完成）且狀態碼為200（請求成功）時，我們解析返回的JSON數據，并根據其中的success字段顯示相應的消息。

最后，我們創建一個jsonData變量，將用戶名和密碼作為JSON對象的屬性，并使用JSON.stringify()方法將其轉換為字符串。然后通過xhr.send()方法將該字符串發送到服務器。

通過上述的代碼，當用戶點擊“登錄”按鈕時，表單數據將會被以JSON格式發送到服務器進行驗證。服務器返回的響應數據將會在頁面上顯示相應的消息。這樣，用戶就可以在不刷新頁面的情況下，獲得登錄結果的即時反饋。

總之，AJAX的應用為網頁開發帶來了很多便利，特別是在處理表單提交時。通過將表單數據以JSON格式發送到服務器，并使用AJAX接收服務器返回的結果，我們可以實現更好的用戶體驗。無論是登錄表單、注冊表單還是其他類型的表單，使用AJAX提交表單數據是一種非常方便和實用的技術。