AJAX (Asynchronous JavaScript and XML) 是一種用于在不重新加載整個網頁的情況下與服務器交換數據的技術，其廣泛應用于現代 Web 開發中。本文將討論如何使用 AJAX 提交一個包含列表的數據。
在很多 Web 應用中，我們經常需要將用戶輸入的數據以列表的形式提交給服務器。例如，一個在線商店的購物車頁面可能需要將用戶選擇的商品列表發送到服務器端進行處理。在傳統的網頁開發中，我們通常會通過提交表單的方式將數據發送到服務器，然后服務器進行處理并返回結果。然而，這種方式會導致整個網頁的刷新，給用戶帶來不好的體驗。
使用 AJAX 技術，我們可以在不需要刷新網頁的情況下，將列表數據發送到服務器端。下面我們將以一個簡單的任務列表為例，介紹如何使用 AJAX 提交一個包含列表的數據。
假設我們有一個任務管理的 Web 應用，用戶可以通過界面添加、刪除和修改任務。每個任務都包含一個標題和一個狀態（已完成或未完成）。我們希望能夠通過 AJAX 將用戶添加的任務發送到服務器，同時保持用戶界面的平滑操作。
首先，我們需要在客戶端編寫 AJAX 請求的代碼。在這個例子中，我們使用 JavaScript 的庫函數fetch發起 POST 請求，將任務數據作為 JSON 對象發送給服務器：

const tasks = [
{title: "完成項目報告", status: "未完成"},
{title: "參加會議", status: "已完成"},
{title: "購買禮物", status: "未完成"}
];
fetch('/addTasks', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(tasks)
})
.then(response => response.json())
.then(data => {
console.log('添加任務成功');
// 更新用戶界面
})
.catch(error => {
console.error('添加任務失敗:', error);
});

上述代碼中，fetch函數會向指定的服務器路徑/addTasks發送一個 POST 請求。請求的頭部包含了Content-Type: application/json，表示請求的數據為 JSON 格式。請求的主體部分為將任務列表轉換為 JSON 字符串。在請求成功后，我們可以根據服務器的響應進行相應的操作。
在服務器端，我們需要接收 AJAX 請求并處理提交的任務列表。具體的實現方式將取決于你所使用的后端技術。以下是一個使用 Node.js 和 Express 框架的示例：

const express = require('express');
const app = express();
// 解析請求主體為 JSON 格式
app.use(express.json());
app.post('/addTasks', (req, res) => {
const tasks = req.body;
// 處理任務列表
// 返回結果給客戶端
res.send('任務添加成功');
});
app.listen(3000, () => {
console.log('服務器已啟動');
});

在上述代碼中，express.json()函數用于解析請求主體為 JSON 格式，以便我們能夠在路由處理函數中獲得任務列表數據。路由/addTasks的處理函數會接受客戶端發送的任務列表，進行相應的處理，并且向客戶端發送響應，表示任務添加成功。
這樣，我們就完成了一個使用 AJAX 提交包含列表的數據的示例。通過 AJAX 的異步特性，我們能夠在發送請求的同時保持用戶界面的流暢。無論是 Web 應用的購物車、任務列表還是其他需要用戶輸入列表數據的應用，都可以使用類似的方式實現數據的提交與處理。
綜上所述，使用 AJAX 提交一個列表數據是一種相當常見的需求。通過 AJAX，我們能夠在不刷新整個網頁的情況下，以異步的方式將列表數據發送到服務器，并獲得相應的處理結果。這無論是對用戶體驗還是對開發者都帶來了很大的便利。希望本文能夠對你在使用 AJAX 提交列表數據的過程中有所幫助。