AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁應(yīng)用程序的技術(shù)。它允許我們通過在后臺與服務(wù)器進(jìn)行異步通信來更新網(wǎng)頁的內(nèi)容，而不需要刷新整個(gè)頁面。在很多情況下，我們需要通過表單提交一組數(shù)據(jù)給服務(wù)器，并且希望在不刷新頁面的情況下顯示服務(wù)器返回的結(jié)果。本文將介紹如何使用AJAX通過表單提交數(shù)組，并展示結(jié)果。

假設(shè)我們有一個(gè)學(xué)生選課系統(tǒng)，包含學(xué)生姓名和所選課程的表單。每個(gè)學(xué)生可以選擇多個(gè)課程，我們希望在學(xué)生提交選課表單后，顯示服務(wù)器返回的結(jié)果，即顯示學(xué)生所選課程的列表。以下是我們可以使用的HTML代碼：

<form id="courseForm"><label for="name">姓名：</label><input type="text" name="name" id="name" required><br><label for="courses">所選課程：</label><input type="checkbox" name="courses[]" value="Math">數(shù)學(xué)
<input type="checkbox" name="courses[]" value="English">英語
<input type="checkbox" name="courses[]" value="Physics">物理
<br><input type="submit" value="提交"></form>

在上面的代碼中，我們使用name屬性為課程復(fù)選框提供了相同的名稱（courses[]），這樣就可以將所選課程作為數(shù)組提交給服務(wù)器?，F(xiàn)在讓我們來處理表單的提交事件，并使用AJAX將數(shù)據(jù)發(fā)送給服務(wù)器：

$('#courseForm').submit(function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
var formData = $(this).serialize(); // 將表單中的所有數(shù)據(jù)序列化為字符串
$.ajax({
url: 'processForm.php',
type: 'POST',
data: formData, // 將表單數(shù)據(jù)作為參數(shù)發(fā)送給服務(wù)器
success: function(response) {
// 在成功接收到服務(wù)器響應(yīng)后，更新頁面上的列表顯示服務(wù)器返回的結(jié)果
$('#courseList').html(response);
}
});
});

在上面的代碼中，我們首先阻止了表單的默認(rèn)提交行為，然后使用serialize()方法將表單數(shù)據(jù)序列化為字符串。接下來，我們使用AJAX發(fā)送POST請求給服務(wù)器，將表單數(shù)據(jù)作為參數(shù)傳遞。當(dāng)服務(wù)器響應(yīng)成功后，我們在success回調(diào)函數(shù)中更新頁面上的課程列表。假設(shè)我們的服務(wù)器端腳本（processForm.php）返回了一個(gè)有序列表格式的字符串（如<ol><li>數(shù)學(xué)</li><li>英語</li></ol>），我們可以將服務(wù)器返回的結(jié)果顯示在頁面上：

<div id="courseList"></div>

通過上述代碼，我們可以實(shí)現(xiàn)通過AJAX提交數(shù)組的功能，并在不刷新頁面的情況下顯示服務(wù)器返回的結(jié)果。這樣，學(xué)生選課系統(tǒng)就可以提供更好的用戶體驗(yàn)和交互性。