解决在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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
2006/11/25 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
百度地图api如何使用
2015/08/03 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
canvas实现钟表效果
2017/02/13 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python文件的md5加密方法
2016/04/06 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python实现飞机大战游戏
2020/10/26 Python
Python面向对象进阶学习
2019/05/21 Python
Python __slots__的使用方法
2020/11/15 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
公司收款委托书范本
2014/09/20 职场文书
家长对孩子的寄语
2015/02/26 职场文书
2015小学师德工作总结
2015/07/21 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
销售会议开幕词
2016/03/04 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
讨论nginx location 顺序问题
2022/05/30 Servers