html - 未收到 Express POST 请求值
问题描述
我正在尝试使用 Express 制作一个简单的注册页面,但是当我尝试从 HTML 表单访问输入值时,我得到undefined
.
应用程序.js:
var express = require('express');
var path = require('path');
var app = express();
const handlebars = require('express-handlebars');
const { json } = require('express');
var port = process.env.PORT || 5000;
var bodyParser = require('body-parser')
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, '/public')))
app.set('views', path.join(__dirname, "views"));
app.set('view engine', 'hbs');
app.get('/', (req,res)=>{
res.render('index');
})
app.get('/register', (req,res)=>{
res.render('register');
})
app.post('/register',(req,res)=>{
const name = req.body.name;
console.log(req.body.name);
res.render('index');
})
app.listen(port, ()=>{
console.log(`Server is running at port ${port}`);
})
注册.hbs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/stylesheets/style.css">
<title>Registration Website</title>
</head>
<body>
<h1>Welcome to our Registration page</h1>
<div class="container">
<div class="form-box">
<form action="/register" method="post" enctype="multipart/form-data">
<input type="text" name="name" placeholder="Enter Your name" autocomplete="off">
<input type="email" name="email" placeholder="Enter Your email" autocomplete="off">
<input type="password" name="password" placeholder="Enter password" autocomplete="off">
<input type="password" name="cpassword" placeholder="Confirm your password" autocomplete="off">
<button type="submit" name="submit">Register</button>
</form>
</div>
</div>
</body>
</html>
我的文件结构:
解决方案
您的<form>
元素设置为发送用 编码的 POST 请求multipart/form-data
,因此使用 Express 接收的有效负载不能简单地从req.body
元素中获取值。multipart/form-data
编码用于编码和发送文件,因此在这样的正常形式中,它是不需要的。
默认情况下,如果enctype
未提供该属性,application/x-www-form-urlencoded
则使用,这允许通过 Express 中的请求正文访问您的 POST 有效负载。
<form action="/register" method="POST">
<input type="text" name="name">
<button type="submit">Submit</button>
</form>
app.post("/register", (req, res) => {
const name = req.body.name; // Fetches the 'name' input's value.
...
});
推荐阅读
- android - 滚动时将更多数据加载到recycleview
- c# - Task.Status 说 WaitingForActivation 虽然任务已经在运行
- python - 如何在使用 pandas read_csv 和 chunksize 选项阅读时跳过 csv 文件中的页脚
- c# - 是否可以在 LINQ 中动态更改替换数据源?
- javascript - 为什么在 api 工作正常时在片段上使用 apollo 客户端查询给我一个空对象?
- nginx - Nginx响应与access.log显示200,但浏览器收不到,如何解决?
- node.js - 运行 npm build 时找不到 Parcel 命令
- scala - 如何使用 Mill 运行 JUnit 测试
- algorithm - 通过创建单个值按两个整数字段(一个 desc 和一个 asc)排序
- c++ - 如何使用 Qt3D 渲染现有的 OpenGL 纹理