浅谈Express.js解析Post数据类型的正确姿势

1、POST请求:HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据。

2、 Content-Type : 是指 http/https 发送信息至服务器时的内容编码类型, Content-Type 用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。四种常见的 POST 请求的 Content-Type 数据类型:

application/x-www-form-urlencoded

multipart/form-data

application/json

text/xml

3、 Express.js : Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。

本文我们主要介绍 Post 请求的 4 种 Content-Type 数据类型,以及如何使用 Express 来对每种 Content-Type 类型进行解析。已经将完整的代码实例上传到 github,github 地址为: https://github.com/fengshi123/request_example,欢迎 star 。

二、四种POST请求的Content-Type数据类型解析

1、application/x-www-form-unlencoded

最常见的 POST 提交数据的方式,浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会默认以 application/x-www-form-urlencoded 方式提交数据。

1.1、前端请求代码

var reqParam = "name=jack"; xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(reqParam);

1.2、服务端解析代码

app.post('/urlencoded', bodyParser.urlencoded({extend:true}), function (req, res) { var result = { name: req.body.name, sex: '男', age: 15 }; res.send(result); });

1.3、浏览器请求 / 响应截图

请求:

浅谈Express.js解析Post数据类型的正确姿势

响应:

浅谈Express.js解析Post数据类型的正确姿势

2、multipart/form-data

使用表单上传文件时,必须指定表单的 enctype 属性值为 multipart/form-data . 请求体被分割成多部分,每部分使用 --boundary 分割开始,紧接着内容描述信息,最后是字段具体内容(文本或二进制);如果传输的是文件,还要包含文件名和文件类型信息;

2.1、前端请求代码

var reqParam = new FormData(document.form2); xhr.send(reqParam);

2.2、服务端解析代码

express 提供了两种插件 formidable 和 multiparty 来处理数据类型为 multipart/form-data 的情况,以下我们分别用两个插件进行处理;

2.2.1、formidable 插件

(1)安装插件

npm install formidable --save

(2)服务端解析处理

app.post('/formData1', function (req, res) { var form = new formidable.IncomingForm(); form.uploadDir = "upload/"; form.parse(req, function (err, fields, files) { var obj = {}; Object.keys(fields).forEach(function (name) { obj[name] = fields[name]; }); Object.keys(files).forEach(function (name) { if (files[name] && files[name].name) { obj[name] = files[name]; fs.renameSync(files[name].path, form.uploadDir + files[name].name); } }); res.send(obj); }); });

2.2.2、multiparty 插件

(1)安装插件

npm install multiparty--save

(2)服务端解析处理

app.post('/formData2', function (req, res) { // 解析一个文件上传 var form = new multiparty.Form(); //设置编辑 form.encoding = 'utf-8'; //设置文件存储路径 form.uploadDir = "upload/"; //设置单文件大小限制 form.maxFilesSize = 2000 * 1024 * 1024; form.parse(req, function (err, fields, files) { var obj = {}; Object.keys(fields).forEach(function (name) { obj[name] = fields[name]; }); Object.keys(files).forEach(function (name) { if (files[name] && files[name][0] && files[name][0].originalFilename) { obj[name] = files[name]; fs.renameSync(files[name][0].path, form.uploadDir + files[name][0].originalFilename); } }); res.send(obj); }); });

2.3、浏览器请求 / 响应截图

请求:

浅谈Express.js解析Post数据类型的正确姿势

响应:

浅谈Express.js解析Post数据类型的正确姿势

3、application/json

application/json 这个 Content-Type 作为响应头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify ,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

3.1、前端请求代码

var reqParam = { name: 'jack' }; xhr.setRequestHeader('Content-type', 'application/json'); xhr.send(JSON.stringify(reqParam));

3.2、服务端解析代码

app.post('/applicationJson', bodyParser.json(), function (req, res) { var result = { name: req.body.name, sex: '男', age: 15 }; res.send(result); });

3.3、浏览器请求 / 响应截图

请求:

浅谈Express.js解析Post数据类型的正确姿势

响应:

浅谈Express.js解析Post数据类型的正确姿势

4、text/xml

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/fd2bfb4faffcc9a4aa4cae21dc490ddc.html