如何修复 Express.js 应用中购物车商品无法移除的问题-html教程-PHP中文网

如何修复 Express.js 应用中购物车商品无法移除的问题

本文详解因 HTML 表单嵌套导致的购物车删除功能失效问题，提供三种可靠解决方案：使用 formaction 属性、添加 formnovalidate 避免表单校验干扰，以及采用 fetch() 实现无刷新异步删除。

本文详解因 html 表单嵌套导致的购物车删除功能失效问题，提供三种可靠解决方案：使用 `formaction` 属性、添加 `formnovalidate` 避免表单校验干扰，以及采用 `fetch()` 实现无刷新异步删除。

在 Express.js 购物车应用中，点击“删除”按钮却跳转至 /checkout 页面而非执行移除逻辑，根本原因在于 HTML 中存在非法的嵌套表单结构——外层

，将 productName 作为隐藏字段置于主表单内，并通过 formaction 指定独立提交地址：

<!-- 替换原嵌套 form 区域 -->
<div class="product-cart__item-col product-cart__item-col--remove">
  <input type="hidden" name="productName" value="<%= product.name %>"><button type="submit" class="product-cart__item-remove-btn" formaction="/remove-from-cart" formmethod="POST" formnovalidate>
    <span class="product-cart__item-remove-btn-icon" aria-hidden="true"></span>
  </button>
</div>

✅ 优势：零 JS 依赖，兼容所有现代浏览器，服务端逻辑无需改动。
⚠️ 注意：由于仍属主表单提交，所有同级值（如数量字段）也会被发送。若存在必填项（如 required），需添加 formnovalidate 属性避免前端校验拦截。

✅ 方案二：纯前端异步删除（推荐用于生产环境）

完全解耦提交逻辑，用 fetch() 发起独立 POST 请求，实现无刷新更新：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

<!-- 移除所有隐藏 input 和 formaction，改用 data 属性 + JS -->
<div class="product-cart__item-col product-cart__item-col--remove">
  <button type="button" class="product-cart__item-remove-btn" data-product-name="<%= product.name %>">
    <span class="product-cart__item-remove-btn-icon" aria-hidden="true"></span>
  </button>
</div>

// 在页面底部或 scripts.js 中添加
document.querySelectorAll('.product-cart__item-remove-btn').forEach(btn => {
  btn.addEventListener('click', async function() {
    const productName = this.dataset.productName;

    try {
      const response = await fetch('/remove-from-cart', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ productName })
      });

      if (response.ok) {
        // 成功后从 DOM 中移除对应商品项（可选）
        this.closest('.product-cart__item').remove();

        // 或重载购物车数据（如需实时总价更新）
        location.reload(); // 简单可靠
      } else {
        throw new Error(`HTTP ${response.status}`);
      }
    } catch (err) {
      console.error('移除商品失败:', err);
      alert('删除失败，请稍后重试');
    }
  });
});

同时更新服务端路由，支持 JSON 解析：

// app.js
app.post('/remove-from-cart', express.json(), (req, res) => {
  const { productName } = req.body;

  if (req.session.cart) {
    req.session.cart = req.session.cart.filter(p => p.name !== productName);
  }

  // 返回 JSON 响应，便于前端判断
  res.json({ success: true, message: '商品已移除' });
});

✅ 优势：精准提交、无冗余字段、用户体验更流畅；支持错误反馈与局部更新。
? 提示：确保 Express 已配置 express.json() 中间件（Express ≥ 4.16+ 默认启用）。