- ExpressJS 教程
- ExpressJS - 首页
- ExpressJS - 概述
- ExpressJS - 环境配置
- ExpressJS - Hello World
- ExpressJS - 路由
- ExpressJS - HTTP 方法
- ExpressJS - URL 构建
- ExpressJS - 中间件
- ExpressJS - 模板引擎
- ExpressJS - 静态文件
- ExpressJS - 表单数据
- ExpressJS - 数据库
- ExpressJS - Cookie
- ExpressJS - Session
- ExpressJS - 身份验证
- ExpressJS - RESTful API
- ExpressJS - 脚手架
- ExpressJS - 错误处理
- ExpressJS - 调试
- ExpressJS - 最佳实践
- ExpressJS - 资源
- ExpressJS 有用资源
- ExpressJS - 快速指南
- ExpressJS - 有用资源
- ExpressJS - 讨论
ExpressJS - 表单数据
表单是网页不可或缺的一部分。几乎每个我们访问的网站都提供表单,用于提交或获取信息。要开始使用表单,我们首先需要安装`body-parser`(用于解析 JSON 和 url-encoded 数据)和 `multer`(用于解析 multipart/form-data)中间件。
要安装`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-parser`和`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 应用程序将以相同的方式处理所有这些请求。要了解更多关于不同发送请求的方法,请查看此页面。
广告
