購物車是一個常見的網頁功能，它允許用戶將自己感興趣的商品添加到購物車中以便日后購買。為了使購物車功能更加交互和實時，我們可以使用Ajax和JavaScript來編寫購物車。通過發送異步請求，我們可以在無需刷新整個頁面的情況下，利用Ajax從服務器獲取商品信息并將其添加到購物車中。本文將介紹如何使用Ajax和JavaScript編寫一個簡單而實用的購物車功能。
在編寫購物車之前，首先需要確保已經引入了jQuery庫。因為jQuery提供了方便的Ajax方法，使得我們可以更加簡潔地使用Ajax。接下來，我們需要創建一個HTML頁面，包含商品列表和購物車區域。
<!DOCTYPE html>
<html>
<head>
<title>購物車示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>商品列表</h1>
<ul id="product-list">
<li data-id="1" data-name="商品A" data-price="100">商品A - ￥100</li>
<li data-id="2" data-name="商品B" data-price="200">商品B - ￥200</li>
<li data-id="3" data-name="商品C" data-price="300">商品C - ￥300</li>
</ul>
<h1>購物車</h1>
<ul id="cart">
<li>購物車是空的</li>
</ul>
<script src="cart.js"></script>
</body>
</html>在上面的HTML代碼中，我們使用了一個無序列表`ul`標簽來展示商品列表，每個商品列表項都使用`li`標簽表示。`li`標簽中通過`data-`屬性存儲了商品的信息，例如商品的ID、名稱和價格。我們還使用了一個空的購物車`ul`標簽來展示購物車內容，初始狀態下購物車是空的。
接下來，我們需要編寫一個JavaScript文件`cart.js`，用于處理購物車功能的實現。
$(document).ready(function() {
// 點擊商品列表項時，將該商品添加到購物車
$('#product-list li').click(function() {
var productId = $(this).data('id');
var productName = $(this).data('name');
var productPrice = $(this).data('price');
addToCart(productId, productName, productPrice);
});
// 將商品添加到購物車
function addToCart(productId, productName, productPrice) {
$.ajax({
type: 'POST',
url: '/add-to-cart',
data: {
'id': productId,
'name': productName,
'price': productPrice
},
success: function(response) {
// 添加成功后更新購物車內容
updateCart(response);
}
});
}
// 更新購物車內容
function updateCart(response) {
$('#cart').empty();
if (response.items.length >0) {
$.each(response.items, function(index, item) {
var cartItem = '<li>' + item.name + ' - ￥' + item.price + '</li>';
$('#cart').append(cartItem);
});
} else {
$('#cart').html('<li>購物車是空的</li>');
}
}
});在`cart.js`中，我們首先注冊了商品列表項的點擊事件。當用戶點擊某個商品時，將該商品的ID、名稱和價格作為參數調用`addToCart`函數，并執行Ajax請求。Ajax請求使用POST方法發送到服務器上的`/add-to-cart`路徑，并攜帶了商品的信息作為請求參數。服務器在收到請求后，將商品添加到購物車，并返回購物車的內容。
在Ajax請求成功后，我們調用`updateCart`函數更新購物車的內容。首先清空購物車區域，然后根據服務器返回的購物車內容數據，逐個將商品添加到購物車中。當購物車為空時，我們顯示一條提示信息。
通過以上的代碼和實現，我們成功地使用Ajax和JavaScript編寫了一個簡單的購物車功能。用戶可以通過點擊商品來將其添加到購物車中，購物車會實時更新并展示添加的商品。這種實時的交互性大大提升了用戶的體驗，使購物過程更加便捷和舒適。