使用PHP+AJAX删除商品后最终总额未减少问题求助

嘿，我看了你的代码，问题主要出在前端脚本的逻辑顺序和事件处理上，咱们一步步来梳理：

核心问题点 #

1. deleteProduct函数逻辑混乱：你在函数里重复绑定了click事件，完全没必要，还会导致重复触发；而且你在发送删除请求前就尝试减去金额，此时数据库还没删除成功，页面商品行也没移除，计算的总额肯定不对。
2. 初始总额未计算：页面加载时只渲染了商品，但没有计算并显示初始总金额。
3. 删除成功后未更新页面：后端删除商品后，前端没有刷新页面数据，旧的商品行和总额还留在页面上。

修复后的代码实现 #

1. 修正getProducts函数（渲染商品+计算初始总额）

我调整了这个函数，先清空表格避免重复渲染，同时在渲染每个商品时计算金额并累加总金额，最后更新页面的总额显示：

getProducts();
function getProducts() {
  $.ajax({
    type: 'GET',
    url: 'all_cart.php',
    dataType: 'JSON',
    success: function(data) {
      // 清空表格tbody，防止重复加载
      $('#mytable tbody').empty();
      let totalAmount = 0;

      data.forEach(function(element) {
        const id = element.id;
        const productName = element.product_name;
        const price = Number(element.price);
        const qty = 1; // 和你默认的input value一致
        const amount = price * qty;
        
        // 累加总金额
        totalAmount += amount;

        // 渲染商品行，给tr加上data-id方便后续定位（可选，但更规范）
        $('#mytable tbody').append(`
          <tr data-id="${id}">
            <td>${id}</td>
            <td>${productName}</td>
            <td>${price}</td>
            <input type='hidden' class='price' name='price' value="${price}">
            <td><input type='text' class='qty' name='qty' value="${qty}"/></td>
            <td><input type='text' class='amount' disabled value="${amount}"/></td>
            <td><Button type='button' class='btn btn-primary' onclick='deleteProduct(${id})'>Delete</Button></td>
          </tr>
        `);
      });

      // 更新页面总金额
      $('#total-amount').text(totalAmount);
    },
    error: function(xhr, status, error) {
      alert(xhr.responseText);
    }
  });
}

2. 修正deleteProduct函数（删除成功后刷新页面）

去掉了多余的事件绑定，改为先确认删除（提升用户体验），发送请求到后端，成功后重新调用getProducts()刷新整个商品列表和总金额：

function deleteProduct(id) {
  // 弹窗确认删除（可选，可根据需求去掉）
  if (!confirm("确定要删除这个商品吗？")) {
    return;
  }

  $.ajax({
    type: 'POST',
    url: 'remove.php',
    data: { id: id },
    success: function(data) {
      if (data == 1) {
        // 删除成功，重新加载商品数据和总金额
        getProducts();
      } else {
        alert("删除失败，请稍后重试");
      }
    },
    error: function(xhr, status, error) {
      alert(xhr.responseText);
    }
  });
}

3. 后端remove.php保持不变（小提示）

你的后端代码没问题，不过注意返回的是纯文本1或0，所以前端ajax可以不用指定dataType: 'JSON'，jQuery会自动识别响应类型，我已经在上面的代码里去掉了这个配置。

为什么这样修复？ #

• 每次删除成功后重新调用getProducts()，相当于从数据库重新拉取最新的购物车数据，渲染页面并计算总额，这样能保证页面数据和数据库完全同步，避免手动操作DOM可能出现的错误。
• 初始加载时就计算并显示总额，用户打开页面就能看到正确的总金额。
• 去掉了多余的事件绑定，避免函数逻辑混乱导致的错误触发。

内容的提问来源于stack exchange，提问作者Nisa Yathu