如何解析POST请求的req.body？Node.js+Express动态按钮提交问题

这问题我之前做项目时也碰到过，咱们一步步来解决：

首先得确认你的表单解析器已经正确配置，这是读取req.body的基础：

• 如果用的是Express 4.16及以上版本，直接用内置的解析器就行，不用额外装body-parser包：

  const express = require('express');
  const app = express();
  
  // 配置解析application/x-www-form-urlencoded格式的表单数据
  app.use(express.urlencoded({ extended: true }));
  

• 要是你还在用旧版body-parser，记得先安装并配置：

  const bodyParser = require('body-parser');
  app.use(bodyParser.urlencoded({ extended: true }));
  

方法1：适配你当前的表单写法 #

你现在把创作者的id作为提交按钮的name属性，点击提交后，req.body里会生成一组唯一的键值对：键是创作者的id，值是按钮显示的姓名。

因为每个表单只有一个提交按钮，所以req.body里只会有这一组数据，你可以这么解析：

app.post('/favoriteCreator', function(req, res) {
  // 获取req.body里唯一的键（也就是创作者的id）
  const creatorId = Object.keys(req.body)[0];
  // 拿到对应的创作者姓名
  const creatorName = req.body[creatorId];

  // 这里写你的业务逻辑，比如把id存入收藏列表
  console.log(`用户收藏了创作者：ID=${creatorId}，姓名=${creatorName}`);

  // 最后返回响应，比如重定向到原页面
  res.redirect('/');
});

这种方法不用改现有表单，但可读性稍弱，后续维护时得反应一下req.body的结构。

方法2：用隐藏字段优化表单（更推荐） #

更规范的做法是用隐藏字段传递创作者id，这样req.body的结构会更清晰，也更好维护：

修改你的Handlebars模板：

<form method="POST" action="/favoriteCreator">
  <!-- 隐藏字段存储创作者id，不显示在页面上 -->
  <input type="hidden" name="creatorId" value="{{this.id}}">
  <!-- 提交按钮只负责展示姓名 -->
  <input type="submit" value="{{this.fname}} {{this.lname}}">
</form>

然后服务器端直接通过字段名读取，逻辑一目了然：

app.post('/favoriteCreator', function(req, res) {
  const creatorId = req.body.creatorId;
  // 要是需要姓名，更可靠的方式是通过id去数据库查询（避免前端传递的值被篡改）
  // 当然也可以再加个隐藏字段存姓名：<input type="hidden" name="creatorName" value="{{this.fname}} {{this.lname}}">

  console.log(`用户收藏了创作者ID：${creatorId}`);

  res.redirect('/');
});

这种写法符合表单设计的常规思路，代码可读性更高，也更安全。

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