如何用Node.js提交表单而不触发页面持续加载？

问题根源是你的后端addProduct函数没有向浏览器返回任何响应，导致浏览器一直等待服务器反馈，从而出现持续加载的状态。以下是两种实用解决方式：

方法一：后端快速返回响应（最简单） #

修改controllers.js代码，给addProduct函数添加res参数，并在保存数据后返回响应：

export const addProduct = async (req, res) => {
  const newProduct = Product(req.body);
  await newProduct.save();
  // 返回成功响应，让浏览器停止加载
  res.status(200).send('产品已成功添加');
  // 若希望用户回到原页面，可改用重定向：
  // res.redirect('/');
};

注意：Express会自动向控制器传递req和res参数，必须接收res才能发送响应结束请求。

方法二：前端异步提交表单（无刷新体验更优） #

用原生JS实现异步提交，避免页面跳转和加载。给表单添加ID后，添加提交事件监听：

在index.ejs中修改表单：

<form id="addProductForm" method="POST" action="/addProduct">
  <!-- 示例表单字段 -->
  <input type="text" name="name" placeholder="产品名称" required>
  <input type="number" name="price" placeholder="价格" required>
  <button type="submit">提交产品</button>
</form>

<script>
document.getElementById('addProductForm').addEventListener('submit', async (event) => {
  // 阻止浏览器默认的表单提交行为，避免页面跳转加载
  event.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(event.target);
  
  try {
    // 异步发送POST请求
    const response = await fetch('/addProduct', {
      method: 'POST',
      body: formData
    });
    
    if (response.ok) {
      // 提交成功后的友好操作
      alert('产品添加成功！');
      event.target.reset(); // 清空表单
    } else {
      throw new Error('提交失败');
    }
  } catch (error) {
    console.error('提交出错:', error);
    alert('产品添加失败，请重试');
  }
});
</script>

这种方式下页面不会刷新加载，体验更流畅，还能灵活添加提交后的提示逻辑。

内容的提问来源于stack exchange，提问作者Lucas Bastino