AJAX（Asynchronous JavaScript and XML）是一種常見的網頁開發技術，它允許網頁在與服務器進行數據交互時，無需刷新頁面即可更新內容。在前端開發中，經常會遇到需要通過AJAX傳遞多個表單的情況。本文將介紹如何使用AJAX傳遞多個表單，并提供一些示例來幫助讀者更好地理解。 在實際應用中，我們可能會遇到一種情況：一個網頁中包含多個表單，用戶可以同時填寫這些表單，然后通過AJAX將數據傳遞到服務器端進行處理。這種情況下，我們可以使用JavaScript將這些表單的數據收集起來，然后通過AJAX傳遞給服務器。 例如，考慮一個在線購物網站上的購物車功能。用戶可以在頁面中添加多個商品到購物車中，并且可以通過點擊“結賬”按鈕來提交購物車的數據。這種情況下，頁面中包含了多個表單（每個表單對應一個商品），我們需要將所有表單的數據一起發送到服務器端。 首先，我們可以使用JavaScript來監聽“結賬”按鈕的點擊事件。當用戶點擊該按鈕時，我們可以通過遍歷頁面中所有的表單元素，將每個表單的數據收集起來存儲在一個JavaScript對象中。接下來，使用AJAX將該JavaScript對象作為參數發送到服務器端進行處理。 下面是一個示例代碼：

let forms = document.querySelectorAll('form');
let checkoutButton = document.getElementById('checkout');
checkoutButton.addEventListener('click', function() {
let data = {};
forms.forEach(function(form) {
let formData = new FormData(form);
let formName = form.getAttribute('id');
data[formName] = {};
for (let [key, value] of formData.entries()) {
data[formName][key] = value;
}
});
// 使用AJAX將data發送到服務器端
// ...
});

在上述代碼中，我們首先通過document.querySelectorAll('form')選擇了頁面中所有的表單元素，并將其存儲在forms變量中。接著，使用document.getElementById('checkout')獲取了“結賬”按鈕的引用，并為其綁定了一個點擊事件監聽器。 當“結賬”按鈕被點擊時，代碼會遍歷forms數組，并逐個處理每個表單。對于每個表單，我們使用FormData對象來收集表單的數據，并將其存儲在一個名為data的JavaScript對象中。該對象使用表單的id作為key，并使用表單數據的鍵值對構建一個嵌套對象。 最后，使用AJAX將data對象發送到服務器端進行處理。具體的AJAX請求的代碼不在本文的討論范圍內，讀者可以根據自己的實際情況選擇合適的方法來發送請求。 總結起來，本文介紹了如何使用AJAX傳遞多個表單的數據。通過使用JavaScript遍歷頁面中的多個表單元素，我們可以將這些表單的數據收集起來，并將其作為一個JavaScript對象通過AJAX請求發送到服務器端進行處理。這種方法在實際應用中常見，特別適用于需要準備多個表單數據并一起提交的場景，比如購物車結算功能。希望本文的內容對讀者能有所幫助，并且能在實際開發中更好地運用AJAX技術。