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

橙-极纪元JJY.Cheng

已于 2022-07-06 10:32:29 修改

阅读量3k

点赞数 1

分类专栏： VUE JS 文章标签： vue.js json 前端

于 2022-07-06 10:28:48 首次发布

本文链接：https://blog.csdn.net/cplvfx/article/details/125633150

版权

JS 同时被 2 个专栏收录

163 篇文章 4 订阅

订阅专栏

VUE

54 篇文章 3 订阅

订阅专栏

方案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) => {
//你的代码
});