- ExpressJS 教程
- ExpressJS - 主页
- ExpressJS - 概述
- ExpressJS - 环境
- ExpressJS - 你好世界
- ExpressJS - 路由
- ExpressJS - HTTP 方法
- ExpressJS - URL 构建
- ExpressJS - 中间件
- ExpressJS - 模板
- ExpressJS - 静态文件
- ExpressJS - 表单数据
- ExpressJS - 数据库
- ExpressJS - Cookie
- ExpressJS - 会话
- ExpressJS - 身份验证
- ExpressJS - RESTful API
- ExpressJS - 脚手架
- ExpressJS - 错误处理
- ExpressJS - 调试
- ExpressJS - 最佳实践
- ExpressJS - 资源
- ExpressJS 有用资源
- ExpressJS - 快速指南
- ExpressJS - 有用的资源
- ExpressJS - 讨论
ExpressJS - 表单数据
表单是网络不可或缺的一部分。几乎我们访问的每个网站都提供为我们提交或获取一些信息的表格。要开始使用表单,我们将首先安装body-parser(用于解析 JSON 和 url 编码数据)和 multer(用于解析多部分/表单数据)中间件。
要安装body-parser和multer,请转到您的终端并使用 -
npm install --save body-parser multer
使用以下代码替换您的index.js文件内容 -
var express = require('express'); var bodyParser = require('body-parser'); var multer = require('multer'); var upload = multer(); var app = express(); app.get('/', function(req, res){ res.render('form'); }); app.set('view engine', 'pug'); app.set('views', './views'); // for parsing application/json app.use(bodyParser.json()); // for parsing application/xwww- app.use(bodyParser.urlencoded({ extended: true })); //form-urlencoded // for parsing multipart/form-data app.use(upload.array()); app.use(express.static('public')); app.post('/', function(req, res){ console.log(req.body); res.send("recieved your request!"); }); app.listen(3000);
导入 body 解析器和 multer 后,我们将使用body-parser解析 json 和 x-www-form-urlencoded 标头请求,同时使用multer解析 multipart/form-data。
让我们创建一个 html 表单来测试一下。使用以下代码创建一个名为form.pug的新视图-
html html head title Form Tester body form(action = "/", method = "POST") div label(for = "say") Say: input(name = "say" value = "Hi") br div label(for = "to") To: input(name = "to" value = "Express forms") br button(type = "submit") Send my greetings
使用以下命令运行您的服务器。
nodemon index.js
现在转到 localhost:3000/ 并根据需要填写表格,然后提交。将显示以下响应 -
看一下你的控制台;它将向您显示请求的正文作为 JavaScript 对象,如以下屏幕截图所示 -
req.body对象包含已解析的请求正文。要使用该对象中的字段,只需像普通 JS 对象一样使用它们即可。
这是最推荐的发送请求的方式。还有很多其他方法,但这些与此处无关,因为我们的 Express 应用程序将以相同的方式处理所有这些请求。要了解有关提出请求的不同方式的更多信息,请查看此页面。