javaweb 购物车删除数量功能

实现购物车删除数量功能需要以下步骤：

1. 在购物车页面中，为每个商品添加删除按钮，并为该按钮绑定一个事件处理程序。

2. 在事件处理程序中，获取该商品的数量和单价，计算出该商品的总价，并从购物车总价中减去该商品的总价。

3. 如果该商品数量为1，则直接从购物车中删除该商品；否则，将该商品数量减1，并更新购物车中该商品的数量和总价。

4. 在后端，更新购物车的数据，并将更新后的购物车数据保存到 session 中。

下面是一个简单的删除数量功能的示例代码：

前端页面：

<table>
  <tr>
    <td>商品名称</td>
    <td>单价</td>
    <td>数量</td>
    <td>总价</td>
    <td>操作</td>
  </tr>
  <tr>
    <td>商品1</td>
    <td>10.00</td>
    <td>
      <button onclick="deleteQty(1)">-</button>
      <span id="qty-1">1</span>
      <button onclick="addQty(1)">+</button>
    </td>
    <td id="total-1">10.00</td>
    <td><button onclick="deleteItem(1)">删除</button></td>
  </tr>
  <tr>
    <td>商品2</td>
    <td>20.00</td>
    <td>
      <button onclick="deleteQty(2)">-</button>
      <span id="qty-2">1</span>
      <button onclick="addQty(2)">+</button>
    </td>
    <td id="total-2">20.00</td>
    <td><button onclick="deleteItem(2)">删除</button></td>
  </tr>
</table>

JavaScript代码：

function deleteQty(itemId) {
  var qty = parseInt(document.getElementById('qty-' + itemId).innerText);
  if (qty > 1) {
    qty--;
    document.getElementById('qty-' + itemId).innerText = qty;
    var price = parseFloat(document.getElementById('price-' + itemId).innerText);
    var total = qty * price;
    document.getElementById('total-' + itemId).innerText = total.toFixed(2);
    var cartTotal = parseFloat(document.getElementById('cart-total').innerText);
    cartTotal -= price;
    document.getElementById('cart-total').innerText = cartTotal.toFixed(2);
  }
}

function addQty(itemId) {
  var qty = parseInt(document.getElementById('qty-' + itemId).innerText);
  qty++;
  document.getElementById('qty-' + itemId).innerText = qty;
  var price = parseFloat(document.getElementById('price-' + itemId).innerText);
  var total = qty * price;
  document.getElementById('total-' + itemId).innerText = total.toFixed(2);
  var cartTotal = parseFloat(document.getElementById('cart-total').innerText);
  cartTotal += price;
  document.getElementById('cart-total').innerText = cartTotal.toFixed(2);
}

function deleteItem(itemId) {
  var price = parseFloat(document.getElementById('price-' + itemId).innerText);
  var qty = parseInt(document.getElementById('qty-' + itemId).innerText);
  var total = parseFloat(document.getElementById('total-' + itemId).innerText);
  var cartTotal = parseFloat(document.getElementById('cart-total').innerText);
  cartTotal -= total;
  document.getElementById('cart-total').innerText = cartTotal.toFixed(2);
  var tr = document.getElementById('item-' + itemId);
  tr.parentNode.removeChild(tr);
  // 发送 AJAX 请求，将该商品从购物车中删除
}

// 页面加载时，从 session 中加载购物车数据
window.onload = function() {
  // 发送 AJAX 请求，获取购物车数据
  // ...
  // 将数据填充到页面中
  // ...
}

后端Java代码：

// 获取购物车数据
Cart cart = (Cart)session.getAttribute("cart");
// 更新购物车数据
cart.removeItem(itemId); // 从购物车中删除该商品
session.setAttribute("cart", cart); // 保存更新后的购物车数据到 session 中