Express POST方法无法获取表单元素值问题求助

问题分析 #

你的代码存在三个关键问题，导致无法获取表单提交的数据：

1. 表单提交方法拼写错误 #

前端表单里的mathod="post"是拼写错误，正确写法是method="post"。拼写错误会让浏览器默认使用GET方法提交表单，你的POST路由根本不会被触发，而GET请求的req.body本身就是空值。

2. 缺少表单数据解析中间件 #

Express框架默认不会解析application/x-www-form-urlencoded类型的表单数据，必须在主入口文件中添加解析中间件，否则req.body始终为空。

3. 复选框的name属性位置错误 #

复选框的name属性应该放在<input>标签上，而非<label>标签，否则提交时不会携带该复选框的参数。

修复后的代码 #

前端表单修复 #

<div class="container-fluid d-flex flex-column align-items-center justify-content-center vh-100 ">
    <div class="d-flex flex-column align-items-center justify-content-center p-5 shadow-lg rounded-3">
        <h1>Login</h1>
        <!-- 修复method拼写错误 -->
        <form class="d-flex flex-column align-items-center" action="/home" method="post">
            <div>
                <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="name" value="1234@123.com">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" name="pass" value="1234567">
                </div>
                <div class="mb-3 form-check">
                <!-- 将name属性移至input标签 -->
                <input type="checkbox" class="form-check-input" id="exampleCheck1" name="checkme">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

后端配置修复 #

在主入口文件（如app.js）中添加表单解析中间件：

var express = require('express');
var app = express();

// 添加表单数据解析中间件
app.use(express.urlencoded({ extended: true }));

// 引入路由
var indexRouter = require('./routes/index');
app.use('/', indexRouter);

// 其他服务器配置...

路由代码可保持不变，但注意GET请求不存在req.body，无需打印：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Login - Code Station' });
});

router.get('/home', function(req, res, next) {
  res.render('home',{value:'home',title:'Home'});
  console.log("Going to Home");
});

router.post('/home',function(req,res){
  // 现在可正常获取表单数据
  console.log(req.body);
  // 记得给客户端返回响应，比如重定向
  res.redirect('/home');
});

module.exports = router;

验证效果 #

启动服务器后提交表单，控制台会输出类似内容：

{ name: '1234@123.com', pass: '1234567', checkme: 'on' }

若未勾选复选框，checkme不会出现在req.body中，这是HTML表单的默认行为。

内容的提问来源于stack exchange，提问作者Muhammed Sibly B