详解vue axios用post提交的数据格式


Posted in Javascript onAugust 07, 2018

vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数。后来进过一番探索,终于发现问题所在。

post提交数据的四种编码方式

1.application/x-www-form-urlencoded

这应该是最常见的post编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中,可以用$_POST[“key”]的方式获取到key的值,在node中我们可以使用querystring中间件对参数进行分离

app.post("/server",function(req,res){
 req.on("data",function(data){
  let key=querystring.parse(decodeURIComponent(data)).key;
  console.log("querystring:"+key)
 });
});

2.multipart/form-data

这也是一种比较常见的post数据格式,我们用表单上传文件时,必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子

详解vue axios用post提交的数据格式 

不同字段以--boundary开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息

3.application/json

axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较

首先是application/json:

详解vue axios用post提交的数据格式 

接着是application/x-www-form-urlencoded:

详解vue axios用post提交的数据格式 

这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的,而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。例如后台node.js依然采用之前对付application/x-www-form-urlencoded的方法,那么querystring.parse(decodeURIComponent(data))之后得到的数据是这样子的

详解vue axios用post提交的数据格式 

这个时候再querystring.parse(decodeURIComponent(data)).key只能获取到undefined

4.text/xml

剩下的一种编码格式是text/xml,这种格式我没有怎么使用过

解决方法

既然我们知道axios post方法默认使用application/json格式编码数据,那么解决方案就有两种,一是后台改变接收参数的方法,另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded,这样就不需要后台做什么修改了。
先来看第一种解决方法

vue组件中,axios发送post请求的代码如下

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
  name:this.name,
  password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

此时控制台Network Headers里面的信息是这样子的

详解vue axios用post提交的数据格式 

后台接收数据需要依赖body-parser中间件,我们事先装好,接着在后台代码中引用body-parser

详解vue axios用post提交的数据格式 

这张截图中,发挥作用的代码仅仅是const bodyParser=require("body-parser");

接下来在路由中使用body-parser

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

这时,当前台发送post请求之后,后台控制台中就会打印出req.body

详解vue axios用post提交的数据格式 

这时,通过req.body.name或者req.body.password就能拿到对应的值。

这种方法比较简单,也不需要前台做过多修改,推荐使用这种方法。

第二种解决方法,具体操作如下

前端

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
  'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
  name:this.name,
  password:this.password
 },
 transformRequest: [function (data) {
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }],
}).then((res)=>{
 console.log(res.data);
})

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前,修改请求数据。这样操作之后,后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。后台代码如下

app.post("/api/haveUser",function(req,res){
  let haveUser=require("../api/server/user.js");
  req.on("data",function(data){
   let name=querystring.parse(decodeURIComponent(data)).name;
   let password=querystring.parse(decodeURIComponent(data)).password;
   console.log(name,password)
   haveUser(name,password,res);
  });
});

这种方法明显就要比第一种麻烦一点,但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

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

Javascript 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 #Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 #Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 #Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 #Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 #Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 #Javascript
React-router4路由监听的实现
Aug 07 #Javascript
You might like
PHP中的extract的作用分析
2008/04/09 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
详解Python中with语句的用法
2015/04/15 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python openpyxl模块的使用详解
2021/02/25 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
美德少年事迹材料
2014/01/23 职场文书
竞选村长演讲稿
2014/04/28 职场文书
大专毕业生求职信
2014/07/05 职场文书
六一儿童节开幕词
2015/01/29 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers