AJAX是一種在Web開發中常用的技術，可以實現無需刷新頁面的數據提交和獲取。在實際開發中，經常需要提交和處理數組類型的數據，例如一個列表中的多個選項。本文將介紹如何使用AJAX提交列表數據，并給出示例代碼。

假設我們有一個簡單的待辦事項列表，每個事項有一個復選框和一個名稱。當用戶在前端選擇某個事項時，我們希望將其標記為完成，并通過AJAX將已完成的事項提交到后端進行處理。在后端，我們可以將這些已完成的事項記錄到數據庫中或者進行其他的業務邏輯處理。

function submitCompletedItems() {
// 獲取所有復選框元素
var checkboxes = document.getElementsByName('itemCheckBox');
// 定義一個數組來存儲已完成的事項
var completedItems = [];
// 遍歷所有復選框
for (var i = 0; i < checkboxes.length; i++) {
// 如果復選框被選中
if (checkboxes[i].checked) {
// 獲取該事項的名稱
var itemName = checkboxes[i].nextSibling.textContent;
// 將已完成的事項添加到數組中
completedItems.push(itemName);
}
}
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/complete-items', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 提交成功后的處理邏輯
console.log('Items submitted successfully.');
}
};
xhr.send(JSON.stringify(completedItems));
}

在以上示例代碼中，我們首先獲取所有復選框元素，并定義一個數組用來存儲已完成的事項。然后通過遍歷所有復選框，判斷復選框是否被選中，如果被選中則將事項名稱添加到數組中。最后，我們使用AJAX將該數組以JSON字符串的形式發送到后端進行處理。

在后端接收到數據后，我們可以根據實際需求進行處理。例如，如果我們使用PHP作為后端語言，可以通過以下代碼進行處理：

$completedItems = json_decode($_POST['completedItems']);
foreach ($completedItems as $item) {
// 將已完成的事項記錄到數據庫中
$sql = "INSERT INTO completed_items (name) VALUES ('$item')";
// 執行SQL語句
// ...
}
echo 'Items submitted successfully.';

通過以上代碼，我們可以將前端提交的已完成事項逐個插入到數據庫中，并返回一個成功的消息給前端。

總結來說，通過AJAX提交列表數據是一種常見的需求。通過使用JavaScript將前端的數據轉為數組，再使用AJAX將數組以JSON字符串的形式發送到后端進行處理，我們可以很方便地實現這一需求。同時，后端的處理邏輯也需要根據實際需求進行相應的開發。