Ajax（Asynchronous JavaScript and XML）是一種在不重新加載整個網頁的情況下，通過異步請求向服務器傳輸和接收數據的技術。它在現代的網頁應用中起著重要的作用，特別是在與后臺進行數據交互時。在這篇文章中，我們將探討如何使用Ajax傳遞數組數據到后臺，并對其進行接收和處理。

假設我們有一個圖書館管理系統的網頁應用，用戶可以通過一個多選框來選擇他們感興趣的圖書類型。當用戶選擇完畢后，我們希望將所選的圖書類型數組通過Ajax發送到后臺，進行進一步的處理。接下來，我們將展示如何實現這一過程。

// HTML頁面
<form id="bookForm"><label><input type="checkbox" name="bookType" value="science" />科學</label><label><input type="checkbox" name="bookType" value="fiction" />小說</label><label><input type="checkbox" name="bookType" value="history" />歷史</label><label><input type="checkbox" name="bookType" value="art" />藝術</label><button type="button" onclick="sendData()">提交</button></form>// JavaScript代碼
function sendData() {
var form = document.getElementById("bookForm");
var formData = new FormData(form);
// 將選中的圖書類型數組轉換為JSON字符串
var bookTypes = Array.from(formData.getAll("bookType"));
var payload = JSON.stringify({ "bookTypes": bookTypes });
// 使用Ajax發送數據到后臺
var xhr = new XMLHttpRequest();
xhr.open("POST", "example.com/backend", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(payload);
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 后臺請求成功的處理邏輯
}
};
}

在上述代碼中，我們使用了一個HTML表單，其中的多選框用于選擇圖書類型。在JavaScript的發送數據函數中，我們首先通過FormData對象來獲取表單的數據。然后，我們將選中的圖書類型數組轉換為JSON字符串，并將其作為payload發送到后臺。我們使用XMLHttpRequest對象來發送Ajax請求，并通過設置請求的HTTP頭部來指定請求的內容類型為JSON。在后臺響應成功后，我們可以在xhr.onreadystatechange的回調函數中進行相關的處理邏輯。

在后臺接收Ajax傳遞的數組數據時，可以使用各種后端編程語言和框架來處理。以下是一個使用Node.js和Express框架的示例代碼：

// 后端代碼（使用Node.js和Express框架）
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/backend', (req, res) =>{
const bookTypes = req.body.bookTypes;
// 對接收到的圖書類型數組進行處理
});
app.listen(3000, () =>{
console.log('Server is running on port 3000');
});

在上述代碼中，我們使用了Node.js和Express框架來創建一個簡單的后端服務器。通過body-parser中間件，我們可以將Ajax發送的JSON數據解析為JavaScript對象。然后，我們可以直接從請求體中提取所需的圖書類型數組，并對其進行相應的處理。

通過本文的示例和解釋，我們可以學習如何使用Ajax傳遞數組數據到后臺，并在后臺進行接收和處理。Ajax的使用使得我們可以更加靈活地與后臺進行數據交互，從而提高了網頁應用的交互性和效率。