JavaScript购物

JavaScript 可以通过与后端服务器交互来实现购物功能。下面是一些简单的步骤：

1. 商品列表：创建一个包含商品信息的列表，例如商品名称、价格和图片等。

2. 购物车：创建一个空的购物车，用于存储用户选择的商品和数量。

3. 添加到购物车：当用户点击“添加到购物车”按钮时，JavaScript 将会向后端服务器发送一个请求，请求包含商品 ID 和数量等信息。

4. 后端验证：后端服务器将验证用户请求中的商品 ID 是否有效，并将商品信息添加到购物车中。

5. JavaScript 响应：JavaScript 将在接收到响应后执行特定的操作，例如更新购物车的总价和数量，显示成功消息或跳转到结账页面。

下面是一个简单的代码示例，演示如何使用 JavaScript 实现购物功能：

<div id="product-list">
    <h3>商品列表</h3>
    <ul>
        <li>
            <img src="product1.jpg" alt="商品 1">
            <h4>商品 1</h4>
            <p>价格：$10</p>
            <button onclick="addToCart(1)">添加到购物车</button>
        </li>
        <li>
            <img src="product2.jpg" alt="商品 2">
            <h4>商品 2</h4>
            <p>价格：$20</p>
            <button onclick="addToCart(2)">添加到购物车</button>
        </li>
        <li>
            <img src="product3.jpg" alt="商品 3">
            <h4>商品 3</h4>
            <p>价格：$30</p>
            <button onclick="addToCart(3)">添加到购物车</button>
        </li>
    </ul>
</div>

<div id="cart">
    <h3>购物车</h3>
    <ul id="cart-items"></ul>
    <p>总价：<span id="cart-total">$0</span></p>
    <p>数量：<span id="cart-count">0</span></p>
    <button onclick="checkout()">结账</button>
</div>

<script>
var cart = [];

function addToCart(productId) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/cart/add", true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.success) {
                var product = response.product;
                var item = { id: product.id, name: product.name, price: product.price, count: 1 };
                var existingItem = cart.find(function(element) {
                    return element.id === item.id;
                });
                if (existingItem) {
                    existingItem.count++;
                } else {
                    cart.push(item);
                }
                updateCart();
            } else {
                alert("添加到购物车失败！");
            }
        }
    };
    var data = JSON.stringify({ "productId": productId, "count": 1 });
    xhr.send(data);
}

function updateCart() {
    var cartItems = document.getElementById("cart-items");
    cartItems.innerHTML = "";
    var totalPrice = 0;
    var totalCount = 0;
    cart.forEach(function(element) {
        var itemPrice = element.price * element.count;
        totalPrice += itemPrice;
        totalCount += element.count;
        var li = document.createElement("li");
        li.innerText = element.name + " x " + element.count + " = $" + itemPrice;
        cartItems.appendChild(li);
    });
    var cartTotal = document.getElementById("cart-total");
    cartTotal.innerText = "$" + totalPrice;
    var cartCount = document.getElementById("cart-count");
    cartCount.innerText = totalCount;
}

function checkout() {
    window.location.href = "/checkout";
}
</script>

在上面的代码中，我们创建了一个商品列表和一个购物车，当用户点击“添加到购物车”按钮时，JavaScript 将向后端服务器发送一个请求，请求包含商品 ID 和数量等信息。如果请求成功，JavaScript 将会更新购物车的总价和数量，显示成功消息或跳转到结账页面。