在前端開發中，經常會遇到需要同時提交多個表單數據的情況。傳統的做法是使用同步提交，即依次提交每個表單，并等待每個請求的響應后再提交下一個表單。然而，這種方式效率低下且用戶體驗差。為了解決這個問題，我們可以使用Ajax技術實現同時提交多個表單，提高效率并改善用戶體驗。

使用Ajax同時提交多個表單的方法有很多，其中一種常見的做法是使用XMLHttpRequest對象。通過創建多個XMLHttpRequest對象，每個對象負責一個表單的提交，并利用XHR的異步特性，同時進行多個請求。

function submitForms() {
var form1 = document.getElementById("form1");
var form2 = document.getElementById("form2");
var xhr1, xhr2;
if (window.XMLHttpRequest) {
xhr1 = new XMLHttpRequest();
xhr2 = new XMLHttpRequest();
} else {
xhr1 = new ActiveXObject("Microsoft.XMLHTTP");
xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr1.onreadystatechange = function() {
if (xhr1.readyState === 4 && xhr1.status === 200) {
// 處理表單1的響應
}
}
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4 && xhr2.status === 200) {
// 處理表單2的響應
}
}
xhr1.open("POST", form1.action, true);
xhr1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr1.send(new FormData(form1));
xhr2.open("POST", form2.action, true);
xhr2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr2.send(new FormData(form2));
}

以上代碼中，我們使用了兩個XMLHttpRequest對象分別處理兩個表單的提交。通過監聽XHR對象的onreadystatechange事件，我們可以監控每個請求的狀態并進行相應的處理。

當兩個請求均完成并獲得響應時，我們可以在相應的回調函數中進行表單的處理和頁面的更新。這樣可以保證在用戶提交表單后，能夠及時更新頁面內容，提供準確的反饋信息。

此外，我們還可以通過Promise對象來管理同時提交多個表單的狀態。這樣可以更加靈活地處理每個表單提交的結果，以及在全部表單提交完成后執行特定的操作。

function submitForms() {
var form1 = document.getElementById("form1");
var form2 = document.getElementById("form2");
var xhr1 = new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.statusText);
}
}
}
xhr.open("POST", form1.action, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(new FormData(form1));
});
var xhr2 = new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.statusText);
}
}
}
xhr.open("POST", form2.action, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(new FormData(form2));
});
Promise.all([xhr1, xhr2]).then(function(results) {
// 處理表單提交結果
}).catch(function(error) {
// 處理錯誤
});
}

以上代碼中，我們將每個請求封裝成一個Promise對象，并使用Promise.all()方法來等待所有請求完成。在.then()方法中，可以對每個表單的提交結果進行特定的處理。而在.catch()方法中，可以處理任何一個請求出錯時的情況。

通過使用Ajax技術同時提交多個表單，我們可以提高效率并改善用戶體驗。無論是使用多個XMLHttpRequest對象，還是使用Promise對象，都可以讓我們更加靈活地處理每個表單的提交結果，并在全部表單提交完成后執行相應的操作。