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


    方案1:使用qs

    示例

    formObject数据是这样的

    1. var formObject={
    2. id:0,
    3. name:'cplvfx',
    4. like:[{id:1,name:'苹果'},{id:2,name:'香蕉'}],
    5. more:{
    6. age:20,
    7. sex:'男'
    8. }
    9. }

    使用 qs转换格式 

    1. that.$axios.post("/", that.$qs.stringify(that.formObject)).then((res) => {
    2. //你的代码
    3. });

     提交时的数据格式是

    1. id: 0
    2. name: cplvfx
    3. like[0][id]: 1
    4. like[0][name]: 苹果
    5. like[1][id]: 2
    6. like[1][name]: 香蕉
    7. more[age]: 20
    8. 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、具体例子如下

    1. let data = qs.stringify({
    2. "username":this.username,
    3. "password":this.password
    4. });
    username=renping&password=123456
    

    如果遇到post提交表单,axios会将数据格式转换成 FormData对象

    这样就不需要对 js的object 对象数据转formdata格式化

     方案2:使用js原生 FormData对象进行提交

    Form Data参考数据,里面包含数组等特殊字段数据

    1. var formObject={
    2. id:0,
    3. name:'cplvfx',
    4. like:[{id:1,name:'苹果'},{id:2,name:'香蕉'}],
    5. more:{
    6. age:20,
    7. sex:'男'
    8. }
    9. }

    要保证提交时的数据是这样的。(因为表单提交时的数据格式要求)

    1. id: 0
    2. name: cplvfx
    3. like[0][id]: 1
    4. like[0][name]: 苹果
    5. like[1][id]: 2
    6. like[1][name]: 香蕉
    7. more[age]: 20
    8. more[sex]: 男

    我们需要这样写

    1. var that=this;
    2. var formData = new FormData();
    3. formData.append("id",0);
    4. formData.append("name","cplvfx");
    5. formData.append("like[0][id]",1);
    6. formData.append("like[0][name]","苹果");
    7. formData.append("like[1][id]",2);
    8. formData.append("like[1][name]","香蕉");
    9. formData.append("more[age]",20);
    10. formData.append("more[sex]","男");
    11. //发起提交请求
    12. that.$axios.post("/",formData).then((res) => {
    13. //你的代码
    14. });

    这种提交方式 jq 和vue同样适用

    显然在没有 qs插件方便

     方案3:把object转换成FormData对象再进行提交

    可以根据“方案2”写一个循环把object对象转换成FormData对象


    延伸阅读 

    new FormData()对象的作用以及使用方法_uu盘的博客-CSDN博客_newformdata

  • 相关阅读:
    认识C#.
    HTML动画效果技术指南:打造引人注目的网页悬浮体验
    torch.stack
    C++ string模拟实现
    基于node的tcp客户端和服务端的简单通信
    一年前端面试打怪升级之路
    AD教程 (十六)常用PCB封装的直接调用
    [Android显示学习]RenderThread渲染
    Matlab论文插图绘制模板第42期—气泡矩阵图(相关系数矩阵图)
    C++右值引用、万能引用、完美转发和引用折叠
  • 原文地址:https://blog.csdn.net/cplvfx/article/details/125633150