详解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 相关文章推荐
基于JQuery 的消息提示框效果代码
Jul 31 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
浅析vue component 组件使用
Mar 06 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
解决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
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
2009/08/04 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python 快速排序代码
2009/11/23 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Django-imagekit的使用详解
2020/07/06 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
小学生春游活动方案
2014/08/20 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
客房领班岗位职责
2015/02/11 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
初中语文教师研修日志
2015/11/13 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python