浅谈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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
详解node中创建服务进程
May 09 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
如何把vuejs打包出来的文件整合到springboot里
Jul 26 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
js实现小时钟效果
Mar 25 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
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
Python基于有道实现英汉字典功能
2015/07/25 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python编程之序列操作实例详解
2017/07/22 Python
详解python算法之冒泡排序
2019/03/05 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
师范毕业生自荐信
2013/10/17 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
农民致富事迹材料
2014/01/23 职场文书
集体备课反思
2014/02/12 职场文书
专家推荐信模板
2014/05/09 职场文书
2014年关工委工作总结
2014/11/17 职场文书
人事专员岗位职责
2015/02/03 职场文书