Ajax是一種在網(wǎng)頁中實(shí)現(xiàn)異步通信的技術(shù),它可以讓網(wǎng)頁在不刷新的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互。在傳輸數(shù)據(jù)時(shí),通常使用JSON格式作為數(shù)據(jù)的載體,因?yàn)镴SON可以輕松地表示復(fù)雜的數(shù)據(jù)結(jié)構(gòu),包括數(shù)組。本文將介紹如何使用Ajax傳輸JSON對象數(shù)組,并給出一些示例。
在使用Ajax傳輸JSON對象數(shù)組之前,我們先來看一個(gè)簡單的例子。假設(shè)我們有一個(gè)購物車應(yīng)用,用戶可以往購物車中添加商品并提交訂單。為了實(shí)現(xiàn)這個(gè)功能,我們需要將用戶選擇的商品以JSON對象數(shù)組的形式發(fā)送到服務(wù)器。
var cart = [
{
"id": 1,
"name": "iPhone 12",
"price": 999
},
{
"id": 2,
"name": "MacBook Pro",
"price": 1999
}
];
// 使用Ajax發(fā)送JSON對象數(shù)組
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitOrder", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ cart: cart }));
在上面的例子中,我們首先定義了一個(gè)名為cart的數(shù)組,每個(gè)元素是一個(gè)JSON對象,表示一個(gè)商品的信息。然后,我們使用Ajax的XMLHttpRequest對象發(fā)送POST請求,將cart數(shù)組作為JSON字符串傳遞給服務(wù)器。在發(fā)送請求之前,我們設(shè)置了請求頭部的Content-Type為application/json,以標(biāo)識請求的數(shù)據(jù)類型。
服務(wù)器端可以根據(jù)需要解析接收到的JSON對象數(shù)組。以下是一個(gè)簡單的Node.js服務(wù)器端示例:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/submitOrder', (req, res) =>{
const cart = req.body.cart;
// 處理購物車數(shù)據(jù)
// ...
res.json({ success: true });
});
app.listen(3000, () =>{
console.log('Server is running on port 3000');
});
在這個(gè)示例中,我們使用了Express框架來創(chuàng)建一個(gè)簡單的Node.js服務(wù)器。通過使用body-parser中間件,服務(wù)器可以解析接收到的JSON數(shù)據(jù)。在提交訂單的路由處理函數(shù)中,我們從請求體中獲取了cart數(shù)組,并進(jìn)行了相應(yīng)的處理。
通過以上的例子可以看出,使用Ajax傳輸JSON對象數(shù)組并不復(fù)雜。只需要將JSON對象數(shù)組轉(zhuǎn)換成JSON字符串,并正確設(shè)置請求頭部的Content-Type即可。服務(wù)器端也需要相應(yīng)地解析JSON數(shù)據(jù)。