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


Posted in Javascript onMay 30, 2019

一、概念介绍

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.jsExpress 是一个保持最小规模的灵活的 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 提供了两种插件 formidablemultiparty 来处理数据类型为 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 作为传输协议, XML 作为编码方式的远程调用规范,它的使用也很广泛,能很好的支持已有的 XML-RPC 服务。不过, XML 结构还是过于臃肿,一般场景用 JSON 会更灵活方便。

4.1、前端请求代码

var text = '<?xml version="1.0"?><methodCall><methodName>examples.getStateName</methodName>' +  '<params><param><value><i4>41</i4></value></param></params></methodCall>';
xhr.setRequestHeader('Content-type', 'text/xml');
xhr.send(text);

4.2、服务端解析代码

app.post('/textXml', bodyParser.urlencoded({extend:true}), function (req, res) {  
  var result = ''; 
  req.on('data', function (chunk) {    
  result += chunk;  
  });  
  req.on('end', function () {    
  res.send(result);  
  });
});

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

请求:

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

响应:

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

三、踩坑汇总

1、对于跨域请求,当 contentType 改为 application/json ,将触发浏览器发送一个预检 OPTIONS 请求到服务器,再发送正常的 post 请求;

2、使用 new FormData() ,然后设置 Content-typeapplication/x-www-form-urlencoded 或者 multipart/form-data 会导致后端无法正常解析,解决方法:就是不进行头部设置, Content-type 会默认 为 multipart/form-data ,服务端正常解析;

3、 contentType 设置为 application/x-www-form-urlencoded 时,传给后端的请求参数为 JSON 字符串, chrome 调试框查看发送的请求参数多了冒号,如下所示:

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

这是因为 application/x-www-form-urlencoded 它将被解析成键值对展示,但是字符串进去是没有改变的,但是展示的时候能看见。解决方法:如果为 JSON 字符串,则设置数据类型为 application/json

四、总结

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript表单事件处理方法详解
May 15 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
vue组件三大核心概念图文详解
May 30 #Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 #Javascript
基于iview的router常用控制方式
May 30 #Javascript
深入了解js原型模式
May 30 #Javascript
js逆向解密之网络爬虫
May 30 #Javascript
Vue.js中的组件系统
May 30 #Javascript
Vue+Django项目部署详解
May 30 #Javascript
You might like
星际实力自我测试
2020/03/04 星际争霸
php创建多级目录的方法
2015/03/24 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
js用闭包遍历树状数组的方法
2014/03/19 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
python中os.remove()用法及注意事项
2021/01/31 Python
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
应聘文员自荐信范文
2014/03/11 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
行政主管岗位职责
2015/02/03 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
python中取整数的几种方法
2021/11/07 Python
Python中三种花式打印的示例详解
2022/03/19 Python