irpas技术客

vue 在使用post提交json数据、表单数据,object数据,解决方案_cplvfx_vue提交json数据

网络投稿 678

方案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.string

qs.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