在前端開發中，ajax 被廣泛用于與服務器進行數據交互和異步更新頁面。常見的情況是通過發送請求并傳遞一些參數來獲取服務器端返回的數據。一般來說，我們通過 ajax 傳遞的參數是一個簡單的值，但有時候我們也會遇到需要傳遞對象數組參數的情況。本文將詳細介紹如何使用 ajax 接收對象數組參數，并提供一些示例代碼和實際應用場景。

什么是對象數組參數

對象數組參數是指包含多個對象的數組，每個對象都有自己的屬性和值。簡單來說，就是一個數組里的每個元素都是一個對象。

[
{name: "Alice", age: 25},
{name: "Bob", age: 30},
{name: "Charlie", age: 35}
]

使用 JSON 字符串傳遞對象數組參數

在 ajax 請求中，可以通過將對象數組轉換為 JSON 字符串來傳遞對象數組參數。服務器端接收到這個 JSON 字符串后，再進行解析和處理。

$.ajax({
url: "api/example",
type: "POST",
data: JSON.stringify([
{name: "Alice", age: 25},
{name: "Bob", age: 30},
{name: "Charlie", age: 35}
]),
contentType: "application/json",
success: function(response) {
console.log(response);
}
});

解析對象數組參數

在服務器端，我們可以使用后端編程語言提供的 JSON 解析庫來解析接收到的 JSON 字符串，并將其轉換為對象數組進行進一步處理。

const express = require("express");
const app = express();
app.post("/api/example", (req, res) => {
const data = JSON.parse(req.body);
// 在這里進行對接收到的對象數組參數的處理
});
app.listen(3000, () => {
console.log("Server is running on port 3000");
});

實際應用場景

對象數組參數的使用在實際應用中非常廣泛。以下是一個常見的例子：網站上的購物車。當用戶在網站上選擇了多個商品并將其添加到購物車時，我們可以使用對象數組的形式存儲購物車中的商品信息。當用戶點擊結算按鈕時，我們可以使用 ajax 將購物車中的商品信息提交到服務器進行結算操作。

$.ajax({
url: "api/checkout",
type: "POST",
data: JSON.stringify([
{productId: 1, quantity: 2},
{productId: 3, quantity: 1},
{productId: 5, quantity: 4}
]),
contentType: "application/json",
success: function(response) {
console.log(response);
}
});

在服務器端，我們可以根據接收到的購物車商品信息進行結算操作，并返回相應的結果給前端。

app.post("/api/checkout", (req, res) => {
const cartItems = JSON.parse(req.body);
// 在這里對購物車商品信息進行結算操作，并返回結果給前端
});

總結

本文介紹了如何使用 ajax 接收對象數組參數，并給出了示例代碼和實際應用場景。通過將對象數組轉換為 JSON 字符串，我們可以方便地將對象數組參數傳遞給服務器，并在服務器端進行解析和處理。這為開發者在前端頁面與服務器進行數據交互和操作提供了更多的靈活性和處理能力。