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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
js控制div弹出层实现方法
May 11 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 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 daodb插入、更新与删除数据
2009/03/19 PHP
浅析PHP文件下载原理
2014/12/25 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Python通过正则表达式选取callback的方法
2015/07/18 Python
简单学习Python time模块
2016/04/29 Python
Python 类的特殊成员解析
2018/06/20 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
班级安全教育实施方案
2014/02/23 职场文书
财会专业大学生求职信
2014/09/26 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
大学生助学金感谢信
2015/01/21 职场文书
班级班风口号大全
2015/12/25 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
2019入党申请书格式
2019/06/25 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android