AJAX多表單提交是一種常見的Web開發技術，它可以實現在不刷新整個頁面的情況下，將多個表單數據一并提交到服務器。這對于需要在一個頁面中填寫多個表單的情況非常有用，例如注冊多個用戶、向多個部門提交申請等。本文將重點介紹AJAX多表單提交的實現方法，并通過舉例來說明其具體應用。通過本文的學習，讀者可以掌握如何實現AJAX多表單提交，提升Web應用的用戶體驗。

實現方法

實現AJAX多表單提交的方法主要有兩種：使用FormData對象和使用序列化表單數據。

使用FormData對象

FormData是一個專門用于處理表單數據的接口，它通過JavaScript可以直接獲取表單數據，包括文本、文件等類型的數據。使用FormData對象實現AJAX多表單提交的代碼如下：

function submitForms() {
var forms = document.getElementsByTagName('form');
var formData = new FormData();
for (var i = 0; i< forms.length; i++) {
var form = forms[i];
var inputs = form.getElementsByTagName('input');
for (var j = 0; j< inputs.length; j++) {
var input = inputs[j];
formData.append(input.name, input.value);
}
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert('提交成功！');
}
}
xhr.send(formData);
}

上述代碼中，我們通過document.getElementsByTagName('form')獲取頁面中的所有表單，然后遍歷每個表單中的input元素，將其name和value添加到FormData對象中。最后，我們使用XMLHttpRequest對象發送POST請求，將FormData對象作為請求體發送到服務器。

使用序列化表單數據

除了使用FormData對象，我們還可以使用jQuery提供的序列化函數來實現AJAX多表單提交。通過jQuery的serialize()方法，我們可以將表單的輸入元素序列化為URL編碼的字符串，然后使用AJAX發送到服務器。以下是使用序列化表單數據實現AJAX多表單提交的代碼：

function submitForms() {
var forms = $('form');
var formData = '';
forms.each(function() {
formData += $(this).serialize() + '&';
});
$.ajax({
type: 'POST',
url: '/submit',
data: formData,
success: function() {
alert('提交成功！');
}
});
}

上述代碼中，我們使用jQuery的each()方法遍歷頁面中的每個表單，并使用serialize()方法將其序列化為URL編碼的字符串。然后，我們使用$.ajax()方法發送POST請求，將序列化的表單數據作為data屬性傳遞給服務器。

具體應用

下面我們通過一個具體的例子來說明AJAX多表單提交的應用。假設我們有一個員工錄入系統，需要錄入多個員工的信息。每個員工的信息都有以下幾個字段：姓名、年齡、職位。我們使用兩個表單輸入員工的信息，一個按鈕實現提交。下面是實現代碼：

<form id="form1"><input type="text" name="name" placeholder="姓名"><br><input type="text" name="age" placeholder="年齡"><br><input type="text" name="position" placeholder="職位"></form><form id="form2"><input type="text" name="name" placeholder="姓名"><br><input type="text" name="age" placeholder="年齡"><br><input type="text" name="position" placeholder="職位"></form><button onclick="submitForms()">提交<script>function submitForms() {
var forms = document.getElementsByTagName('form');
var formData = new FormData();
for (var i = 0; i< forms.length; i++) {
var form = forms[i];
var inputs = form.getElementsByTagName('input');
for (var j = 0; j< inputs.length; j++) {
var input = inputs[j];
formData.append(input.name, input.value);
}
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert('提交成功！');
}
}
xhr.send(formData);
}
</script>

上述代碼中，我們使用兩個表單分別輸入兩個員工的信息，點擊提交按鈕即可將這兩個員工的信息一并提交到服務器。通過使用AJAX多表單提交的方法，我們可以避免刷新整個頁面，提高了用戶填寫表單的效率。

結論

AJAX多表單提交是一種非常實用的Web開發技術，它可以實現在不刷新整個頁面的情況下，將多個表單數據一并提交到服務器。本文介紹了使用FormData對象和序列化表單數據實現AJAX多表單提交的方法，并通過一個具體的例子說明了其應用。掌握了這些知識，我們可以更加高效地開發Web應用，提升用戶體驗。