详解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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
javascript屏蔽右键代码
May 15 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
使用Javascript简单计算器
Nov 17 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 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中定时计划任务的实现原理
2013/01/08 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
python zip()函数使用方法解析
2019/10/31 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python raise的基本使用
2020/09/10 Python
涉外文秘个人求职的自我评价
2013/10/07 职场文书
计算机专业职业规划
2014/02/28 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
项目投资建议书
2014/05/16 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
民政局个人整改措施
2014/09/24 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python