在Web開(kāi)發(fā)中，Ajax是一種非常常見(jiàn)且強(qiáng)大的技術(shù)，它可以在不刷新整個(gè)頁(yè)面的情況下，與后端進(jìn)行數(shù)據(jù)交互。而對(duì)于發(fā)送復(fù)雜JSON數(shù)據(jù)，Ajax也是一個(gè)非常實(shí)用的工具。本文將介紹如何使用Ajax發(fā)送復(fù)雜JSON數(shù)據(jù)，并通過(guò)舉例說(shuō)明其應(yīng)用場(chǎng)景和用法。

假設(shè)我們正在開(kāi)發(fā)一個(gè)電商網(wǎng)站，用戶(hù)可以在網(wǎng)站上添加商品到購(gòu)物車(chē)，并且可以實(shí)時(shí)查看購(gòu)物車(chē)的內(nèi)容。當(dāng)用戶(hù)點(diǎn)擊“添加到購(gòu)物車(chē)”按鈕時(shí)，需要將商品信息以JSON數(shù)據(jù)的形式發(fā)送給后端進(jìn)行處理。這個(gè)過(guò)程就可以通過(guò)Ajax來(lái)實(shí)現(xiàn)。

首先，我們需要定義一個(gè)包含商品信息的JavaScript對(duì)象，然后將其轉(zhuǎn)換為JSON字符串。代碼如下：

var product = {
id: 1,
name: 'iPhone 12',
price: 6999,
quantity: 1
};
var jsonStr = JSON.stringify(product);

接下來(lái)，我們可以使用Ajax發(fā)送這個(gè)JSON字符串到后端進(jìn)行處理。代碼如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/addToCart', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理返回的數(shù)據(jù)
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send(jsonStr);

上述代碼中，我們使用XMLHttpRequest對(duì)象創(chuàng)建一個(gè)AJAX請(qǐng)求，并指定請(qǐng)求的方法、URL和是否異步。通過(guò)調(diào)用`setRequestHeader`方法，我們?cè)O(shè)置請(qǐng)求頭的Content-Type為`application/json`，告訴后端我們發(fā)送的數(shù)據(jù)是JSON格式的。然后，通過(guò)`send`方法將JSON字符串發(fā)送給后端。

在后端，我們可以使用任何一種后端技術(shù)來(lái)處理這個(gè)請(qǐng)求。以Node.js為例，我們可以使用express框架來(lái)處理這個(gè)請(qǐng)求。代碼如下：

app.post('/api/addToCart', (req, res) =>{
var product = req.body; // 獲取發(fā)送的商品信息
// 處理商品信息
var response = {
message: '成功添加商品到購(gòu)物車(chē)'
};
res.json(response);
});

在上述代碼中，我們使用express框架的`post`方法來(lái)處理POST請(qǐng)求。通過(guò)`req.body`可以獲取到發(fā)送的JSON數(shù)據(jù)，然后進(jìn)行相應(yīng)的處理。在這個(gè)例子中，我們簡(jiǎn)單地返回一個(gè)包含成功添加商品信息的JSON對(duì)象。

通過(guò)上述例子，我們可以看到，通過(guò)Ajax發(fā)送復(fù)雜JSON數(shù)據(jù)非常容易，并且應(yīng)用場(chǎng)景廣泛。無(wú)論是實(shí)時(shí)更新購(gòu)物車(chē)內(nèi)容，還是發(fā)送表單數(shù)據(jù)，都可以使用Ajax來(lái)實(shí)現(xiàn)。我們只需定義好JSON數(shù)據(jù)結(jié)構(gòu)，并通過(guò)`JSON.stringify`將其轉(zhuǎn)換為JSON字符串，然后使用Ajax發(fā)送給后端進(jìn)行處理。后端根據(jù)需要對(duì)JSON數(shù)據(jù)進(jìn)行解析，進(jìn)行相應(yīng)的操作，并返回處理結(jié)果。這樣，前端和后端就能夠?qū)崿F(xiàn)數(shù)據(jù)的高效傳輸和處理。

綜上所述，Ajax發(fā)送復(fù)雜JSON數(shù)據(jù)是一種非常實(shí)用的技術(shù)，它簡(jiǎn)化了數(shù)據(jù)交互的過(guò)程，提高了Web應(yīng)用的用戶(hù)體驗(yàn)。無(wú)論是開(kāi)發(fā)電商網(wǎng)站還是其他類(lèi)型的應(yīng)用，都可以通過(guò)Ajax來(lái)實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)傳輸和處理。