使用Ajax提交JSON數組到后臺是一種常見的前端交互方式。通過Ajax，我們可以將前端頁面上的數據封裝成JSON數組，并通過HTTP請求將其發送到后臺服務器進行處理。這種方式可以提高用戶交互的效率和數據傳輸的速度，使前端與后臺之間的聯動更加靈活和有效。 例如，假設我們有一個電商網站，用戶可以選擇多個商品并將它們添加到購物車。在用戶點擊“購買”按鈕時，我們可以將選中的商品數據封裝成JSON數組，然后通過Ajax提交到后臺進行結算。 前端頁面代碼：

<script>
function submitCart() {
var selectedItems = []; // 選中的商品數組
// 獲取選中的商品數據
var items = document.getElementsByClassName("item");
for (var i = 0; i< items.length; i++) {
var item = items[i];
var isChecked = item.getElementsByTagName("input")[0].checked;
if (isChecked) {
var name = item.getElementsByClassName("name")[0].innerText;
var price = item.getElementsByClassName("price")[0].innerText;
var quantity = item.getElementsByClassName("quantity")[0].innerText;
// 構建JSON對象并添加到數組中
var selectedItem = {
"name": name,
"price": price,
"quantity": quantity
};
selectedItems.push(selectedItem);
}
}
// 將JSON數組轉成字符串
var jsonStr = JSON.stringify(selectedItems);
// 使用Ajax提交到后臺
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/checkout", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理后臺返回的結果
var response = JSON.parse(xhr.responseText);
if (response.success) {
alert("購買成功！");
} else {
alert("購買失敗，請稍后再試！");
}
}
};
xhr.send(jsonStr);
}
</script>

在上述代碼中，我們首先定義了一個selectedItems數組用于存儲選中的商品數據。然后，通過獲取頁面上每個商品元素的相關信息，構建JSON對象并添加到數組中。接下來，使用Ajax進行POST請求，將JSON數組轉化為字符串，并設置請求頭的Content-Type為application/json;charset=utf-8。在后臺服務器接收到這個請求后，可以通過解析請求體中的JSON字符串，獲取到選中的商品信息并進行處理。 后臺服務器代碼（例如基于Node.js的Express框架）：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/api/checkout', (req, res) =>{
const selectedItems = req.body;
// 進行購物結算的相關處理
// ...
res.json({ success: true });
});
app.listen(3000, () =>{
console.log('Server started on port 3000');
});

在后臺服務器中，我們使用了body-parser中間件來處理請求體中的JSON數據，并通過POST路由/api/checkout來接收這個請求。后臺服務器可以根據接收到的JSON數組進行購物結算等相關的處理，然后返回結果給前端頁面。 通過這個例子，我們可以看到使用Ajax提交JSON數組到后臺的過程。這種方式可以使前端與后臺之間的數據傳輸更加靈活和高效，在實際開發中有很多應用場景，比如統計用戶行為、批量數據處理等。然而，需要注意安全性問題，應該對提交的JSON數據進行驗證和過濾，防止惡意用戶進行非法操作。