Node.js处理表单POST请求后如何不跳转修改HTML指定标签内容

核心原理 #

原生form表单的默认提交行为会触发页面跳转，只要阻止默认提交行为，改用前端异步请求（AJAX）调用后端接口，拿到返回结果后直接操作DOM更新label内容即可实现需求。

前端HTML代码修改 #

需要给表单添加提交按钮，同时绑定提交事件处理逻辑，替换原有HTML代码如下：

<form id="calcForm" action="/Cong" method="post">
  A: <input type="text" name="a"><br>
  B: <input type="text" name="b"><br>
  <button type="submit">提交计算</button><br>
  <label id="result"></label>
</form>

<script>
// 监听表单提交事件
document.getElementById('calcForm').addEventListener('submit', async function(e) {
  // 阻止表单默认提交跳转的行为
  e.preventDefault();
  // 自动收集表单内的输入数据
  const formData = new FormData(this);
  try {
    // 异步发送POST请求到后端接口
    const response = await fetch('/Cong', {
      method: 'POST',
      body: new URLSearchParams(formData),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });
    // 读取服务端返回的文本结果
    const calcResult = await response.text();
    // 将结果写入页面的result标签
    document.getElementById('result').textContent = calcResult;
  } catch (error) {
    document.getElementById('result').textContent = '计算出错，请检查输入后重试';
  }
})
</script>

服务端代码说明 #

你现有服务端代码无需修改即可正常运行，如果需要更规范的结构化返回，也可以调整为返回JSON格式：

app.post("/Cong",urlencodedParser,(req,res)=>{
    const a = parseInt(req.body.a);
    const b = parseInt(req.body.b);
    const c = a + b;
    // 返回JSON格式结果
    res.json({
      code: 0,
      data: c,
      msg: "计算成功"
    })
})

如果调整为返回JSON，前端对应修改结果读取逻辑即可：

// 把 const calcResult = await response.text(); 替换为
const resData = await response.json();
const calcResult = `Result: ${resData.data}`;

内容的提问来源于stack exchange，提问作者Quốc Thiệu