解决在Vue中使用axios用form表单出现的问题


Posted in Javascript onOctober 30, 2019

vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法。(推荐第二种方法)

提交数据的四种编码方式

一,应用/ X WWW的窗体-urlencoded

这应该是最常见的后编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中,可以用$ _ POST [“钥匙”]的方式获取到关键的值,在节点中我们可以使用查询字符串中间件对参数进行分离

app.post("/server",function(req,res){
 req.on("data",function(data){
  let key=querystring.parse(decodeURIComponent(data)).key;
  console.log("querystring:"+key)
 });
});

2.multipart /格式数据

这也是一种比较常见的后数据格式,我们用表单上传文件时,必须使形式表单的加密类型属性或者AJAX的内容类型参数等于多部分/格式的数据。使用这种编码时格式到发送后台的数据长得像这样子 不同字段以开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息

解决在Vue中使用axios用form表单出现的问题

--boundary

3.application / json

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

首先应用的英文/ JSON: 接着是应用程序/ x-WWW窗体-urlencoded: 这里可以明显看出应用程序/ x-WWW窗体-urlencoded上传到后台的数据是以键值形式进行组织的,而应用程序/ JSON则直接是个JSON字符串。如果在处理的应用程序/ JSON时后台还是采用对付应用程序/ x-WWW窗体-urlencoded的方式将会产生问题。例如后台的node.js依然采用之前对付应用程序/ x-WWW窗体-urlencoded的方法,那么之后得到的数据的英文这样子的 这个时候再只能电子杂志到未定义

解决在Vue中使用axios用form表单出现的问题

querystring.parse(decodeURIComponent(data))

解决在Vue中使用axios用form表单出现的问题

querystring.parse(decodeURIComponent(data)).key

4.text / XML

剩下的一种编码格式是文本/ XML,这种格式我没有怎么使用过

解决方法

既然我们知道axios post方法默认使用application / json格式编码数据,那么解决方案就有两种,一是后台改变接收参数的方法,另一种则是将axios post方法的编码格式修改为application / x- WWW窗体-urlencoded,这样就不需要后台做什么修改了。

先来看第一种解决方法

VUE组件中,爱可信发送后请求的代码如下

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
  name:this.name,
  password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

控制台此时标题网络里面的信息的英文这样子的 后台接收数据需要依赖中间件,我们事先装好,接着在后台代码中引用体解析器 这张截图中,作用英文发挥的代码仅仅的英文接下来在路由中使用身体解析器

解决在Vue中使用axios用form表单出现的问题

body-parser

解决在Vue中使用axios用form表单出现的问题

const bodyParser=require("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);
});

这时,当前台发送后请求之后,后台控制台就会中出打印这时,通过或者就能拿到对应的值。 这种方法比较简单,也不需要前台做过多修改,推荐使用这种方法。req.body

解决在Vue中使用axios用form表单出现的问题

req.body.namereq.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);
})

其中发挥关键作用的是标头与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);
  });
});

以上这篇解决在Vue中使用axios用form表单出现的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jQuery select操作控制方法小结
May 26 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
Jquery获取radio选中的值
May 05 jQuery
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
微信小程序签到功能
Oct 31 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
vue路由 遍历生成复数router-link的例子
Oct 30 #Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 #Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 #Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 #Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 #Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 #Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 #Javascript
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
php 中英文语言转换类
2011/09/07 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php封装一个异常的处理类
2017/06/08 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
详解Python中的日志模块logging
2015/06/19 Python
python用户管理系统
2018/03/13 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
详解小白之KMP算法及python实现
2019/04/04 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
建设工程授权委托书
2014/09/22 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书