如何实现HTML按钮向Fastify路由发送POST请求且不跳转？

你的问题出在表单默认的提交行为上——点击submit按钮后，浏览器会自动导航到表单（或按钮）指定的action地址，导致页面跳转。要解决这个问题，只需要阻止表单的默认提交行为，改用异步请求（比如原生的fetch API）发送POST请求即可。

方案一：保留原有HTML结构，添加JavaScript处理 #

你可以继续使用现有的HTML代码，只需要添加一段JS来拦截表单提交事件：

HTML（无需修改）

<form class="addCart" action="http://localhost:8080" method="post">
    <button type="submit" formaction="/api/carts/products/{{product.id}}"> +1 </button>
</form>

JavaScript代码

// 给所有.addCart表单绑定提交事件
document.querySelectorAll('.addCart').forEach(form => {
  form.addEventListener('submit', async (e) => {
    // 阻止浏览器默认的表单提交跳转行为
    e.preventDefault();
    
    // 获取触发提交的按钮，拿到它的formaction作为请求URL
    const submitBtn = e.submitter;
    const requestUrl = submitBtn.formAction;

    try {
      // 发送异步POST请求
      const response = await fetch(requestUrl, {
        method: 'POST',
        // 如果你的Fastify接口需要特定请求头，比如JSON格式，在这里添加
        headers: {
          'Content-Type': 'application/json'
          // 如果需要CSRF令牌，也需要在这里带上对应的请求头
        }
        // 如果需要在请求体中传递额外数据，可以添加body字段：
        // body: JSON.stringify({ key: value })
      });

      if (response.ok) {
        console.log('商品添加成功');
        // 这里可以添加成功后的UI操作，比如更新购物车数量、显示提示
      } else {
        console.error('请求失败，状态码:', response.status);
        // 处理错误情况，比如显示错误提示
      }
    } catch (error) {
      console.error('请求出错:', error);
    }
  });
});

方案二：简化HTML，用数据属性传递参数 #

如果不想依赖formaction属性，也可以用HTML数据属性来传递商品ID，代码会更清晰：

HTML

<!-- 移除form的action，给按钮添加data-product-id属性 -->
<form class="addCart" method="post">
    <button type="submit" class="add-to-cart" data-product-id="{{product.id}}"> +1 </button>
</form>

JavaScript代码

document.querySelectorAll('.add-to-cart').forEach(btn => {
  btn.addEventListener('click', async (e) => {
    e.preventDefault();
    
    // 从数据属性中获取商品ID
    const productId = e.target.dataset.productId;
    // 构造请求URL
    const requestUrl = `/api/carts/products/${productId}`;

    // 后续请求逻辑和方案一一致
    try {
      const response = await fetch(requestUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        }
      });

      if (response.ok) {
        console.log('添加成功');
        // 更新UI操作
      } else {
        console.error('请求失败');
      }
    } catch (err) {
      console.error('请求错误:', err);
    }
  });
});

关键要点 #

• e.preventDefault()：这是阻止页面跳转的核心，它取消了浏览器默认的表单提交导航行为。
• 异步请求：使用fetch（或XMLHttpRequest、Axios）发送异步请求，不会阻塞页面，也不会导致刷新。
• 错误处理：一定要添加try/catch和响应状态判断，避免请求失败时没有反馈。

内容的提问来源于stack exchange，提问作者Diego Cast