详解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 prototype对象的属性说明
Mar 13 Javascript
javascript检测浏览器flash版本的实现代码
Dec 06 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
javascript的几种写法总结
Sep 30 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
Vue组件通信入门之Provide和Inject机制
Dec 29 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[48:32]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python中list列表的高级函数
2016/05/17 Python
python实现两个文件合并功能
2018/04/01 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python实现视频分帧效果
2019/05/31 Python
set在python里的含义和用法
2019/06/24 Python
python 追踪except信息方式
2020/04/25 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
2014国庆节标语口号
2014/09/19 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS