AJAX，全稱為Asynchronous JavaScript and XML，是一種在web應用中實現異步數據交互的技術。它的出現大大提升了用戶體驗，使得網頁能夠實現更加流暢、動態的交互效果。在實際應用中，我們經常會遇到需要同時提交多個表單的情況。本文將以一個購物網站為例，介紹如何使用AJAX實現同時提交兩個表單，并獲取服務器返回的結果。

1. 需求分析

我們的購物網站有兩個表單：一個表單用于填寫用戶的基本信息（如姓名、地址等），另一個表單用于選擇購買的商品及數量。用戶完成表單的填寫后，點擊提交按鈕后，我們希望能夠同時提交兩個表單，并獲取服務器返回的結果，以供用戶進行下一步操作。

2. 實現步驟

2.1 HTML結構和CSS樣式

<form id="userForm"></form>
<form id="orderForm"></form>
<button id="submitBtn">提交</button>

2.2 AJAX代碼編寫

document.getElementById('submitBtn').addEventListener('click', function() {
var userFormData = new FormData(document.getElementById('userForm'));
var orderFormData = new FormData(document.getElementById('orderForm'));
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務器返回的結果
var response = JSON.parse(xhr.responseText);
// ...
}
};
xhr.open('POST', '/submit-forms', true);
xhr.send({
userForm: userFormData,
orderForm: orderFormData
});
});

3. 服務器端處理

在服務器端，我們需要接收并處理收到的兩個表單數據，并返回處理結果給客戶端：

app.post('/submit-forms', function(req, res) {
var userForm = req.body.userForm;
var orderForm = req.body.orderForm;
// 處理表單數據
// ...
// 返回處理結果給客戶端
res.status(200).json({success: true, message: '提交成功'});
});

4. 結果顯示和錯誤處理

在AJAX請求完成后，我們可以根據服務器返回的結果進行相應的結果展示和錯誤處理：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 處理服務器返回的結果
var response = JSON.parse(xhr.responseText);
// 顯示成功消息給用戶
alert(response.message);
} else {
// 處理錯誤情況
alert('提交失敗，請稍后再試');
}
}
};

5. 總結

AJAX提供了一種便捷的方式實現紛繁復雜的表單提交需求。通過以上步驟，我們成功地實現了同時提交兩個表單，并獲取服務器返回的結果。當然，實際應用中可能會遇到更復雜的情況，但是這種基本的思路和方法是通用的。通過不斷學習和實踐，我們可以更好地掌握AJAX技術，為用戶提供更好的體驗。