AJAX 是一種用于在 Web 應用程序中處理異步請求的強大工具。通過 AJAX，可以使網頁在不刷新的情況下向服務器發送請求，并處理服務器端返回的數據。在開發 Web 應用程序時，經常需要提交表單數據到服務器。傳統的提交表單的方式會導致整個頁面刷新，用戶體驗不佳。而使用 AJAX 技術可以通過 JSON 格式將表單數據提交到服務器，大大提升用戶體驗同時保持頁面的局部刷新。本文將探討如何使用 AJAX 提交 JSON 格式的表單數據。

使用 AJAX 提交 JSON 格式的表單數據非常簡單。首先，需要創建一個 JavaScript 函數來處理 AJAX 請求。在該函數中，使用 XMLHttpRequest 對象來發送請求并處理服務器的響應。下面是一個示例函數：

<script>
function submitForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var formData = {
"name": name,
"email": email
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("表單提交成功！");
} else {
alert("表單提交失敗，請重試。");
}
}
};
xhr.open("POST", "submit-form.php", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(formData));
}
</script>

在上述代碼中，首先獲取表單中的數據，并構建一個包含表單字段名稱和值的 JSON 對象。然后，創建一個 XMLHttpRequest 對象，并指定其 onreadystatechange 事件處理函數。當 AJAX 請求的狀態發生變化時，該事件處理函數將被調用。在處理函數中，首先檢查響應的狀態和 HTTP 狀態碼是否正確。然后，解析響應的 JSON 數據并根據返回的結果進行相應的提示。最后，通過 open() 方法指定請求的類型、URL 和異步標志，使用 setRequestHeader() 方法設置請求頭的 Content-Type 為 application/json，通過 send() 方法發送 AJAX 請求的數據。

接下來，需要在 HTML 中創建一個表單并關聯 JavaScript 函數。下面是一個示例的表單：

<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email" required>
<button type="button" onclick="submitForm()">提交</button>
</form>

在上述代碼中，定義了一個包含姓名和郵箱兩個字段的表單。使用type="text"和type="email"來分別指定輸入框的類型為文本和郵箱，同時設置required屬性以確保用戶填寫了相關字段。最后，通過onclick屬性將 submitForm() 函數與提交按鈕關聯。

以上就是使用 AJAX 提交 JSON 格式的表單數據的示例。通過 AJAX 技術，可以改善用戶的交互體驗，同時保持頁面的局部刷新，使得表單提交更加高效和便捷。