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 attachEvent和addEventListener使用方法
Mar 19 Javascript
javascript调试说明
Jun 07 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
详解Document.Cookie
Dec 25 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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一个找二层目录的小东东
2012/08/02 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
php数组编码转换示例详解
2014/03/11 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python实现dijkstra最短路由算法
2019/01/17 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
pip install命令安装扩展库整理
2021/03/02 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
python 如何做一个识别率百分百的OCR
2021/05/29 Python