本文將介紹如何使用Ajax和JSON實現一個簡單的購物車功能。購物車是電商網站中常見的功能，它的作用是方便用戶將感興趣的商品加入到購物車中，并在結算時一次性購買。通過Ajax和JSON，我們可以實現在不刷新頁面的情況下將商品添加到購物車中，并實時更新購物車的內容和總金額。
1. 創建購物車頁面
首先，我們需要創建一個購物車頁面。該頁面包含一個商品列表，每個商品有一個“加入購物車”的按鈕。當用戶點擊該按鈕時，我們將使用Ajax發送請求將商品數據添加到購物車中。
<body> <div id="cart"> <h3>購物車</h3> <ul id="cart-items"> <li>商品1</li> <li>商品2</li> <li>商品3</li> </ul> <p id="total">總金額：0元</p> </div> <div id="products"> <h3>商品列表</h3> <ul> <li>商品1 <button onclick="addToCart(1)">加入購物車</button></li> <li>商品2 <button onclick="addToCart(2)">加入購物車</button></li> <li>商品3 <button onclick="addToCart(3)">加入購物車</button></li> </ul> </div> <script src="script.js"></script> </body>
2. 實現添加到購物車的功能
我們需要一個JavaScript文件來處理添加商品到購物車的邏輯。在這個JavaScript文件中，我們定義一個函數addToCart，該函數接收一個參數productId，用于指定要添加到購物車的商品ID。
// script.js
function addToCart(productId) {
// 發送Ajax請求將商品添加到購物車
// 示例代碼，實際應用中需要根據服務端的接口文檔來編寫具體的Ajax請求代碼
var xhr = new XMLHttpRequest();
xhr.open("POST", "add-to-cart.php", 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) {
updateCart(response.cartItems, response.totalAmount);
}
}
};
xhr.send(JSON.stringify({ productId: productId }));
}
function updateCart(cartItems, totalAmount) {
// 更新購物車的商品列表和總金額
var cartItemsElement = document.getElementById("cart-items");
var totalAmountElement = document.getElementById("total");
cartItemsElement.innerHTML = "";
cartItems.forEach(function(item) {
var li = document.createElement("li");
li.innerText = item.name;
cartItemsElement.appendChild(li);
});
totalAmountElement.innerText = "總金額：" + totalAmount + "元";
}3. 服務器端代碼接收請求
在步驟2的代碼中，我們發送了一個Ajax請求到add-to-cart.php文件。我們需要在服務器端編寫代碼來接收并處理這個請求。
// add-to-cart.php1, "name" =>"商品1"], ["id" =>2, "name" =>"商品2"], ["id" =>3, "name" =>"商品3"], ["id" =>$data->productId, "name" =>"新加入的商品"], ]; $totalAmount = 100; echo json_encode([ "success" =>true, "cartItems" =>$cartItems, "totalAmount" =>$totalAmount, ]); ?>
4. 更新購物車內容
當服務器端返回添加到購物車成功的響應時，我們需要更新購物車頁面中的商品列表和總金額。在步驟2中的代碼中，我們調用了updateCart函數來更新購物車的內容。
5. 結論
通過使用Ajax和JSON，我們可以實現一個簡單的購物車功能。用戶在點擊“加入購物車”按鈕時，將商品ID發送到服務器端，并通過服務器端返回的響應更新購物車頁面的內容。這種方式避免了頁面的刷新，提升了用戶體驗，同時減輕了服務器的壓力。