方案1:使用qs 示例
formObject数据是这样的
var formObject={ id:0, name:'cplvfx', like:[{id:1,name:'苹果'},{id:2,name:'香蕉'}], more:{ age:20, sex:'男' } }使用 qs转换格式?
that.$axios.post("/", that.$qs.stringify(that.formObject)).then((res) => { //你的代码 });?提交时的数据格式是
id: 0 name: cplvfx like[0][id]: 1 like[0][name]: 苹果 like[1][id]: 2 like[1][name]: 香蕉 more[age]: 20 more[sex]: 男 1、安装 npm install qs 2、在组件中应用 import qs from 'qs' 3、主要使用qs.parse(),qs.stringqs.parse()是将URL解析成对象的形式 qs.stringify()是将对象?序列化成URL的形式,以&进行拼接
如果遇到post提交表单,axios会将数据格式转换成?FormData对象
这样就不需要对?js的object 对象数据转formdata格式化
4、具体例子如下 let data = qs.stringify({ "username":this.username, "password":this.password }); username=renping&password=123456如果遇到post提交表单,axios会将数据格式转换成?FormData对象
这样就不需要对?js的object 对象数据转formdata格式化
?方案2:使用js原生?FormData对象进行提交Form Data参考数据,里面包含数组等特殊字段数据
var formObject={ id:0, name:'cplvfx', like:[{id:1,name:'苹果'},{id:2,name:'香蕉'}], more:{ age:20, sex:'男' } }要保证提交时的数据是这样的。(因为表单提交时的数据格式要求)
id: 0 name: cplvfx like[0][id]: 1 like[0][name]: 苹果 like[1][id]: 2 like[1][name]: 香蕉 more[age]: 20 more[sex]: 男我们需要这样写
var that=this; var formData = new FormData(); formData.append("id",0); formData.append("name","cplvfx"); formData.append("like[0][id]",1); formData.append("like[0][name]","苹果"); formData.append("like[1][id]",2); formData.append("like[1][name]","香蕉"); formData.append("more[age]",20); formData.append("more[sex]","男"); //发起提交请求 that.$axios.post("/",formData).then((res) => { //你的代码 });这种提交方式 jq 和vue同样适用
显然在没有 qs插件方便
?方案3:把object转换成FormData对象再进行提交可以根据“方案2”写一个循环把object对象转换成FormData对象
延伸阅读?
new FormData()对象的作用以及使用方法_uu盘的博客-CSDN博客_newformdata
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #vue提交json数据 #Vue