AJAX 是一種在網頁中使用 JavaScript 和 XML 的技術，可以實現無需刷新頁面的異步通信。而 JSON 是一種輕量級的數據交換格式，廣泛應用于各種 Web 應用中。本文將介紹如何使用 AJAX 向 JSON 文件中寫入數據。以一個簡單的購物車為例，通過 AJAX 將用戶選擇的商品信息以 JSON 格式寫入到服務器中。

首先我們需要在頁面中創建一個包含商品信息的表單。用戶可以選擇商品的名稱、數量和價格等信息。同時，我們還需要添加一個按鈕，點擊按鈕時將表單數據寫入到 JSON 文件中。以下是一個示例的 HTML 代碼：

<form id="cartForm">
<label for="productName">商品名稱：</label>
<input type="text" id="productName" name="productName"><br>
<label for="quantity">數量：</label>
<input type="number" id="quantity" name="quantity"><br>
<label for="price">價格：</label>
<input type="number" id="price" name="price"><br>
<input type="button" value="添加到購物車" onclick="addToCart()">
</form>

在 JavaScript 代碼中，我們定義了一個函數 addToCart，該函數將通過 AJAX 向服務器發送 POST 請求，并將表單數據以 JSON 格式作為請求體發送。以下是一個示例的 JavaScript 代碼：

function addToCart() {
var form = document.getElementById('cartForm');
var product = {
productName: form.productName.value,
quantity: form.quantity.value,
price: form.price.value
};
var xhr = new XMLHttpRequest();
xhr.open('POST', '/cart', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
alert('商品已成功添加到購物車！');
} else {
alert('添加到購物車失敗，請重試。');
}
};
xhr.send(JSON.stringify(product));
}

在上述代碼中，我們首先獲取表單中的數據，并將其存儲在一個 JavaScript 對象 product 中。然后，我們創建一個 XMLHttpRequest 對象，并使用 open 方法指定請求類型、URL 和異步標志。接下來，我們使用 setRequestHeader 方法設置請求頭的 Content-Type 為 application/json，以告訴服務器我們要發送的數據是 JSON 格式。然后，我們使用 send 方法將存儲在 product 對象中的數據發送到服務器。

在服務器端，我們可以通過解析請求體中的 JSON 數據來獲取商品信息，并將其保存到 JSON 文件中。以下是一個使用 Node.js 的簡單示例：

const express = require('express');
const fs = require('fs');
const app = express();
app.use(express.json());
app.post('/cart', (req, res) => {
const product = req.body;
const cart = JSON.parse(fs.readFileSync('cart.json'));
cart.push(product);
fs.writeFileSync('cart.json', JSON.stringify(cart));
res.sendStatus(200);
});
app.listen(3000, () => {
console.log('服務器已啟動！');
});

在上述代碼中，我們使用 express 框架創建了一個簡單的服務器，并使用中間件 express.json 來解析請求體中的 JSON 數據。當客戶端發送 POST 請求到路徑 /cart 時，我們首先讀取存儲在 cart.json 文件中的購物車數據，并將其解析為 JavaScript 對象。然后，我們將收到的商品信息添加到購物車數組中，并將更新后的購物車數據寫入到 cart.json 文件中。最后，我們發送狀態碼為 200 的響應以表示請求成功。

通過以上步驟，我們實現了使用 AJAX 向 JSON 文件中寫入數據的功能。用戶在頁面中填寫購物車商品信息，點擊按鈕后，表單數據將以 JSON 格式發送給服務器，服務器將數據解析并保存到 JSON 文件中。這樣，我們可以輕松地實現購物車的添加商品功能。