浅谈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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
JavaScript流程控制(循环)
Dec 06 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
用libtemplate实现静态网页生成
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
Python实现批量下载文件
2015/05/17 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python3.6的venv模块使用详解
2018/08/01 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
python logging模块的使用总结
2019/07/09 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
写给女朋友的道歉信
2014/01/08 职场文书
环保专项行动方案
2014/05/12 职场文书
主持人演讲稿
2014/05/13 职场文书
婚前协议书范本两则
2014/10/16 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
MySQL 视图(View)原理解析
2021/05/19 MySQL
Python 中面向接口编程
2022/05/20 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android
Mysql如何查看是否使用到索引
2022/12/24 MySQL