表单 POST 请求正文为空 - Node.js / express / ejs / body-parser
Form POST Requests Body is Empty - Node.js / express / ejs / body-parser
我在 node.js 的注册表中遇到问题 post。每次表单 posted 正文时,请求都有信息,但正文是空的。我是 node 和 express 的新手,所以它可能很小,但我一辈子都弄不明白。
这是我在 ejs 中的表单:
<form class="form-signin" method="post" action="/users/register">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" autocomplete="off">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class="form-group">
<label class="sr-only" for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Re-enter Password">
</div>
<button class="btn btn-dark mt-3" type="submit">Submit</button>
</form>
这是我在用户路由器中的路由器代码:
router.post('/register', function(request, response, next) {
console.log(request);
console.log(request.body)
response.render('register', { 'title': 'Register' });
});
这里是控制台上的相关输出:
console.log(request); output shortened this is just the tail.
_startAt: [ 299545, 483820242 ],
_startTime: 2018-09-20T16:08:59.366Z,
_remoteAddress: '::1',
body: {},
_body: true,
length: undefined,
read: [Function],
secret: undefined,
cookies: {},
signedCookies: {},
route:
Route {
path: '/register',
stack: [ [Object] ],
methods: { post: true } } }
{}
POST /users/register 200 21.906 ms - 2361
app.js代码:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(function(request, response, next) {
next(createError(404));
});
app.use(function(error, request, response, next) {
response.locals.message = error.message;
response.locals.error = request.app.get('env') === 'development' ? error : {};
response.status(error.status || 500);
response.render('error');
});
module.exports = app;
我尝试过的事情:
- 不同的浏览器
- 不同的路线
- 从头开始编写更简单的表单
- 强大而不是正文解析器
此时我很确定这是 ejs 表单的问题,因为请求中的正文对象始终为空。
表单中的 <input>
元素必须定义 name
属性,而不仅仅是 id
.
另一个答案指出了您遗漏的内容,我更新了您的 .ejs 代码以向您展示张贴 html 表单的正确方法:
<form class="form-signin" method="post" action="/users/register">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Email" autocomplete="off">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class="form-group">
<label class="sr-only" for="confirmPassword">Confirm Password</label>
<input type="password" name="confirmPassword" class="form-control" id="confirmPassword" placeholder="Re-enter Password">
</div>
<button class="btn btn-dark mt-3" type="submit">Submit</button>
</form>
如果您要提交更复杂的表单或需要对字段进行某种验证,则可以执行上述操作或使用 javascript/jquery 处理提交。
看到这个答案:Submit a form using jQuery
使用 express 时的另一个常见错误,请确保使用 body-parser
https://www.npmjs.com/package/body-parser
i.e
const router = express();
const bodyParser = require('body-parser');
router.use(bodyParser.json())
.use(bodyParser.urlencoded({
extended: true
}));
我在 node.js 的注册表中遇到问题 post。每次表单 posted 正文时,请求都有信息,但正文是空的。我是 node 和 express 的新手,所以它可能很小,但我一辈子都弄不明白。
这是我在 ejs 中的表单:
<form class="form-signin" method="post" action="/users/register">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" autocomplete="off">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class="form-group">
<label class="sr-only" for="confirmPassword">Confirm Password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Re-enter Password">
</div>
<button class="btn btn-dark mt-3" type="submit">Submit</button>
</form>
这是我在用户路由器中的路由器代码:
router.post('/register', function(request, response, next) {
console.log(request);
console.log(request.body)
response.render('register', { 'title': 'Register' });
});
这里是控制台上的相关输出:
console.log(request); output shortened this is just the tail.
_startAt: [ 299545, 483820242 ],
_startTime: 2018-09-20T16:08:59.366Z,
_remoteAddress: '::1',
body: {},
_body: true,
length: undefined,
read: [Function],
secret: undefined,
cookies: {},
signedCookies: {},
route:
Route {
path: '/register',
stack: [ [Object] ],
methods: { post: true } } }
{}
POST /users/register 200 21.906 ms - 2361
app.js代码:
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(function(request, response, next) {
next(createError(404));
});
app.use(function(error, request, response, next) {
response.locals.message = error.message;
response.locals.error = request.app.get('env') === 'development' ? error : {};
response.status(error.status || 500);
response.render('error');
});
module.exports = app;
我尝试过的事情:
- 不同的浏览器
- 不同的路线
- 从头开始编写更简单的表单
- 强大而不是正文解析器
此时我很确定这是 ejs 表单的问题,因为请求中的正文对象始终为空。
表单中的 <input>
元素必须定义 name
属性,而不仅仅是 id
.
另一个答案指出了您遗漏的内容,我更新了您的 .ejs 代码以向您展示张贴 html 表单的正确方法:
<form class="form-signin" method="post" action="/users/register">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Email" autocomplete="off">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" name="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class="form-group">
<label class="sr-only" for="confirmPassword">Confirm Password</label>
<input type="password" name="confirmPassword" class="form-control" id="confirmPassword" placeholder="Re-enter Password">
</div>
<button class="btn btn-dark mt-3" type="submit">Submit</button>
</form>
如果您要提交更复杂的表单或需要对字段进行某种验证,则可以执行上述操作或使用 javascript/jquery 处理提交。
看到这个答案:Submit a form using jQuery
使用 express 时的另一个常见错误,请确保使用 body-parser
https://www.npmjs.com/package/body-parser
i.e
const router = express();
const bodyParser = require('body-parser');
router.use(bodyParser.json())
.use(bodyParser.urlencoded({
extended: true
}));