解决在Vue中使用axios用form表单出现的问题
vue中使用Axios第三方库,采用形式提交,参数格式为multipart /格式数据 ,请求参数变为对象格式的解决办法。(推荐第二种方法)
提交数据的四种编码方式
一,应用/ X WWW的窗体-urlencoded
这应该是最常见的后编码方式,一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在php中,可以用$ _ POST [“钥匙”]的方式获取到关键的值,在节点中我们可以使用查询字符串中间件对参数进行分离
app.post("/server",function(req,res){
req.on("data",functihttp://www.cppcns.comon(data){
let key=querystring.parse(decodeURIComponent(data)).key;
console.log("querystring:"+key)
});
});
2.multipart /格式数据
这也是一种比较常见的后数据格式,我们用表单上传文件时,必须使形式表单的加密类型属性或者AJAX的内容类型参数等于多部分/格式的数据。使用这种编码时格式到发送后台的数据长得像这样子 不同字段以开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息
--boundary
3.application / json
axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。我们可以将application / json与application / x-www-form -uhttp://www.cppcns.comrlencoded的发送数据进行比较
首先应用的英文/ JSON: 接着是应用程序/ x-WWW窗体-urlencoded: 这里可以明显看出应用程序/ x-WWW窗体-urlencoded上传到后台的数据是以键值形式进行组织的,而应用程序/ JSON则直接是个JSON字符串。如果在处理的应用程序/ JSON时后台还是采用对付应用程序/ x-WWW窗体-urlencoded的方式将会产生问题。例如后台的node.js依然采用之前对付应用程序/ x-WWW窗体-urlencoded的方法,那编程客栈么之后得到的数据的英文这样子的 这个时候再只能电子杂志到未定义
querystring.parse(decodeURIComponent(data))
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);
})
控制YrIGbxY台此时标题网络里面的信息的英文这样子的 后台接收数据需要依赖中间件,我们事先装好,接着在后台代码中引用体解析器 这张截图中,作用英文发挥的代码仅仅的英文接下来在路由中使用身体解析器
body-parser
const bodyParser=require("body-parser");
app.post("/api/haveUser",bodyParser.json(),function(req,res){
console.log(req.body);
let haveUser=require("http://www.cppcns.com/wangluo/api/server/user.js");
haveUser(req.body.name,req.body.password,res);
});
这时,当前台发送后请求之后,后台控制台就会中出打印这时,通过或者就能拿到对应的值。 这种方法比较简单,也不需要前台做过多修改,推荐编程客栈使用这种方法。req.body
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("http://www.cppcns.com/wangluo/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表单出现的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
本文标题: 解决在Vue中使用axios用form表单出现的问题
本文地址: http://www.cppcns.com/wangluo/javascript/283345.html
解决在Vue中使用axios用form表单出现的问题相关推荐
- layui 父页面向弹出框中的子页面form表单进行赋值
1 ,父页面js layer.open({type: 2,title: '修改数据',shadeClose: false,shade: 0.8,area: ['60%', '60%'],content ...
- 原生axios 的form表单提交
axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式 1.第一种方法,创建表单对象,数据放到表单对象里. let config = {//form ...
- element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果 效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
- android中怎么保存checkbox中的checked属性_第二十四天HTML中的form表单
form表单 用于收集用户信息,如:登录.注册等场景:所有要提交的数据都必须放在form标签中 action:提交地址.动作,与input标签中typy标签的submit属性相关联. ,提交地址是ac ...
- 面包屑的实现+tag功能实现+form表单
一 面包屑实现 打开VC/后台管理文件夹 在store/tab.js页面: 在CommonAside页面添加红方框代码: CommonHeader页面添加红方框代码: CommonHeader页面添加 ...
- from提交ajax,form表单提交与ajax消息传递
form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...
- react antd form 表单清空
关于react_antd_desgin的学习这两天也是获取到的知识零零散散,大多在网上也能获取的到,所以隔了很长的时间,没有编写关于react相关的文章.今天之所以写也是因为公司中秋节放假,在郑州,窗 ...
- ajax提交整个form表单
在项目开发中,有时提交form表单时不能单单用action或者jquery的 表单提交方法有三种,主要说下第三种 第一种:用form自带属性action提交 第二种:用jquery提交:$(" ...
- Django入门教程(八)Form表单
有时候我们需要在前台用 get 或 post 方法提交一些数据,所以需要用到 html 表单的知识. 1.创建项目,选择File–>New project–>Django ①根据个人需要, ...
最新文章
- 计算开始到结束的时间_阿里钉钉首次战胜微信,云计算的涨停潮只是开始,远未结束...
- 关于JavaScript,这10条血与泪的建议大家一定要看
- c语言编程15,c语言编程15题.doc
- 将某一类型文件还原为无默认打开方式
- Android开发笔记(六十九)JNI实战
- Signaltap的使用
- 2.5 分类模型评估指标—AUC与ROC及绘制混淆矩阵与ROC曲线
- 中文乱码解决办法(java)
- 简单实现查找题库随机出题, 且可点击查看对应答案
- 散布谣言也能实现一致性?来看看Gossip协议如何活用六度分隔理论
- dedecms源码分析(第一部分)
- java故事之致敬坚持梦想的人
- Python实例集锦
- android开发视频资源 电驴10G下载
- Python 实现 周志华 《机器学习》 BP算法
- HashMap源代码详解
- vector 删除元素的几种方法
- Unity - 微信小游戏
- 计算机电池的性能参数,小技巧 笔记本电池健康报告建立与解读
- 日志(2022.4.11-至今 --------毕业论文相关)
热门文章
- SecureCrt /Vi 命令大全
- java 集成小米,华为推送
- 减时不降薪!全球最大四天工作制试验结果出炉,网友:“这才是打工人想要的优质打工体验吧”
- 试药员体检​​​​​​​流程及注意事项介绍
- 华为p40android auto,华为P40 Pro升级EMUI 11并获Wi-Fi6认证:底层基于Android 10
- #来写一段你最拿手的代码。
- 提升SolidWorks设计质量的一些技巧
- Latex的Table控制行间距
- 单例模式详解——参考B站课程
- Javascript中this指向丢失原因及解决办法详解