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 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JS将unicode码转中文方法
May 08 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
node实现的爬虫功能示例
May 04 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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
关于PHP实现异步操作的研究
2013/02/03 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python+opencv实现动态物体识别
2018/01/09 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
主持词开场白
2014/03/17 职场文书
党员领导干部承诺书
2014/05/28 职场文书
火灾现场处置方案
2014/05/28 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
同学聚会通知短信
2015/04/20 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL