Node/Express中BodyParser无法获取输入字段数据，返回undefined

嘿，我太懂这种教程里看起来稀松平常，但自己上手就卡壳的感觉了！你遇到的表单数据捕获问题，大概率是几个容易忽略的细节没做好，咱们一步步来捋清楚。

你已经引入了body-parser，但没有配置它解析表单数据——Express默认不会自动处理POST请求的表单体，这是最常见的坑！赶紧加上这段代码：

// 配置body-parser解析x-www-form-urlencoded格式的表单数据
app.use(bodyParser.urlencoded({ extended: false }));

解释下：extended: false表示用Node内置的querystring模块解析数据，足够处理普通表单；如果需要解析嵌套的复杂表单，可以设为true（依赖qs库）。

很多人会忘记给输入框加name属性——没有name的表单控件，数据根本不会被提交到服务器！给你一个正确的Pug表单示例（假设你的模板文件是views/index.pug）：

form(action="/submit" method="POST")
  label(for="username") 用户名:
  input(type="text" id="username" name="username") // 这里的name必须加！
  br
  label(for="gender") 性别选择:
  select(id="gender" name="gender") // 下拉框同样需要name
    option(value="male") 男
    option(value="female") 女
  br
  button(type="submit") 提交数据

另外要确保表单的method是POST，如果用GET的话，数据会挂在URL的查询参数里，需要用req.query而不是req.body来获取，一般表单提交用POST更规范。

你需要在app.js里写一个POST路由来接收并处理数据，比如：

// 先加一个GET路由渲染首页表单
app.get('/', (req, res) => {
  res.render('index');
});

// 处理表单提交的POST路由
app.post('/submit', (req, res) => {
  // 现在就能从req.body里拿到数据了！
  const username = req.body.username;
  const gender = req.body.gender;

  console.log('用户输入的用户名:', username);
  console.log('用户选择的性别:', gender);

  // 可以返回响应，比如跳转到结果页或者直接显示数据
  res.send(`提交成功！用户名：${username}，性别：${gender}`);
});

• 打开浏览器开发者工具（F12），切换到Network标签，提交表单后查看POST请求的Form Data，确认数据是否真的发送了
• 启动服务器后，看控制台有没有报错，比如body-parser没配置的话，req.body会是undefined
• 确保表单的action路径和路由的路径完全一致（比如表单写的是/submit，路由就必须是app.post('/submit', ...)）

给你补全后的完整app.js参考：

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var pug = require('pug');

// initialize express
var app = express();

// set up port
var port = process.env.PORT || 1337;

// 配置body-parser解析表单数据
app.use(bodyParser.urlencoded({ extended: false }));

// 设置视图目录和Pug模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// 渲染首页表单
app.get('/', (req, res) => {
  res.render('index');
});

// 处理表单提交
app.post('/submit', (req, res) => {
  const { username, gender } = req.body;
  console.log('捕获到的表单数据:', req.body);
  res.send(`提交成功！用户名：${username}，性别：${gender}`);
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

内容的提问来源于stack exchange，提问作者J.G.Sable