Node.js中如何单次请求提交多个表单的POST数据

浏览器触发表单提交时，只会发送触发提交操作的那个表单内的所有数据，其他表单的输入内容不会被自动包含到请求里，这就是你只拿到第一个表单数据的原因。下面是两种可行的解决方法：

方法一：合并所有表单元素到单个表单（最简单） #

直接把两个表单的所有输入元素放到同一个<form>标签里，保留一个submit按钮即可，这样提交时会自动包含所有输入项。

修改后的HTML示例： #

<form action="/" method="post">
  <!-- 原第一个表单的元素 -->
  <input type="number" name="num1" placeholder="数字1">
  <input type="number" name="num2" placeholder="数字2">
  
  <!-- 原第二个表单的元素 -->
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="email" placeholder="邮箱">
  
  <button type="submit">执行计算</button>
</form>

Node.js端代码无需修改，body-parser会自动解析所有表单字段，你可以直接通过req.body.num1、req.body.username等获取所有数据。

方法二：用JavaScript手动收集多表单数据并发送请求 #

如果因为页面布局或其他原因必须保留多个表单结构，可以通过JS监听submit按钮的点击事件，手动收集所有表单的输入数据，再发送POST请求。

修改后的HTML示例： #

<!-- 给两个表单分别加ID，方便JS获取 -->
<form id="form1" action="/" method="post">
  <input type="number" name="num1" placeholder="数字1">
  <input type="number" name="num2" placeholder="数字2">
</form>

<form id="form2" action="/" method="post">
  <input type="text" name="username" placeholder="用户名">
  <input type="email" name="email" placeholder="邮箱">
</form>

<!-- 按钮不要放在表单里，或者阻止默认提交行为 -->
<button id="calcBtn">执行计算</button>

JavaScript代码示例： #

document.getElementById('calcBtn').addEventListener('click', async (e) => {
  // 阻止按钮可能触发的默认表单提交行为
  e.preventDefault();
  
  // 创建FormData对象，用来收集所有表单数据
  const formData = new FormData();
  
  // 收集第一个表单的所有输入项
  document.querySelectorAll('#form1 input').forEach(input => {
    if (input.name) { // 确保输入项有name属性（后端需要通过name识别字段）
      formData.append(input.name, input.value);
    }
  });
  
  // 收集第二个表单的所有输入项
  document.querySelectorAll('#form2 input').forEach(input => {
    if (input.name) {
      formData.append(input.name, input.value);
    }
  });
  
  // 发送POST请求到后端
  try {
    const response = await fetch('/', {
      method: 'POST',
      body: formData
    });
    // 处理响应（根据你的需求添加）
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('请求失败:', error);
  }
});

Node.js端代码依然无需修改，body-parser会正常解析FormData中的所有字段，你可以在req.body中拿到所有表单的输入值。

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