AJAX（Asynchronous JavaScript and XML）是一種使用JavaScript和XML進行數(shù)據(jù)交互的技術(shù)，它可以在不刷新頁面的情況下與服務(wù)器進行數(shù)據(jù)交換。在Web開發(fā)中，常常需要通過表單提交數(shù)據(jù)到服務(wù)器，并獲取服務(wù)器返回的結(jié)果。本文將介紹如何使用AJAX實現(xiàn)表單提交數(shù)組的功能。

假設(shè)我們有一個名為“students”的表單，其中包含多個學生的信息：姓名、年齡和成績。當點擊提交按鈕后，我們希望將所有學生的信息作為數(shù)組的形式提交到服務(wù)器，并顯示服務(wù)器返回的結(jié)果。以下是一段示例代碼：

<form id="students" method="post" action="/submit">
<input type="text" name="name[]" placeholder="姓名" />
<input type="number" name="age[]" placeholder="年齡" />
<input type="number" name="score[]" placeholder="成績" />
<!-- 可以根據(jù)需要設(shè)置更多的學生信息字段 -->
<input type="submit" value="提交" />
</form>
<div id="result"></div>

上述代碼中，通過設(shè)置相同的name屬性并以[]結(jié)尾，使得表單中的輸入框在提交時被解釋為一個數(shù)組。當點擊提交按鈕時，表單會將所有學生的信息作為數(shù)組提交到服務(wù)器的指定URL，即"action"屬性所指定的地址。在這個例子中，表單將數(shù)據(jù)提交到了名為"submit"的頁面。

在JavaScript中，我們可以使用XMLHttpRequest對象來發(fā)送AJAX請求，并在請求成功后獲取服務(wù)器返回的結(jié)果。以下是處理表單提交的JavaScript代碼：

在上述代碼中，我們在表單的"submit"事件上添加了一個監(jiān)聽函數(shù)。當表單提交時，該函數(shù)會被觸發(fā)。首先，我們使用event.preventDefault()方法阻止表單的默認提交行為，然后使用FormData對象存儲表單數(shù)據(jù)。接下來，我們創(chuàng)建了一個XMLHttpRequest對象，并添加了一個"load"事件的監(jiān)聽函數(shù)。當請求成功返回時，該函數(shù)會被執(zhí)行。在監(jiān)聽函數(shù)中，我們首先檢查服務(wù)器返回的狀態(tài)碼是否為200（表示請求成功），然后將服務(wù)器返回的結(jié)果顯示在頁面上。

通過上述代碼，我們實現(xiàn)了使用AJAX提交表單數(shù)組的功能。無論表單中有多少個學生的信息，我們都可以將它們作為數(shù)組一起提交到服務(wù)器，并實時顯示服務(wù)器返回的結(jié)果。