axios post提交formdata的实例


Posted in Javascript onMarch 16, 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。使用这种编码格式时发送到后台的数据长得像这样子

axios post提交formdata的实例

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

3.application/json

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

首先是application/json:

axios post提交formdata的实例

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

axios post提交formdata的实例

这里可以明显看出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))之后得到的数据是这样子的

axios post提交formdata的实例

这个时候再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里面的信息是这样子的

axios post提交formdata的实例

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

axios post提交formdata的实例

这张截图中,发挥作用的代码仅仅是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

axios post提交formdata的实例

这时,通过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);
 });
});

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

以上这篇axios post提交formdata的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
在vue组件中使用axios的方法
Mar 16 #Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 #Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 #Javascript
vue axios 表单提交上传图片的实例
Mar 16 #Javascript
vue中实现图片和文件上传的示例代码
Mar 16 #Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 #Javascript
Vue实现active点击切换方法
Mar 16 #Javascript
You might like
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python sys模块sys.path使用方法示例
2013/12/04 Python
python动态参数用法实例分析
2015/05/25 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
股东合作协议书
2014/04/14 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
不同意离婚上诉状
2015/05/23 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书