工作记录之前后端交互序列化提交json数据

https://blog.csdn.net/qq_37209834/article/details/102737565

问题描述

后端要求以RequestBody 接收数据,由于 表单数据过多,用ajax每个数据参数单独传获取比较麻烦,决定使用serializeArray()或serialize()函数获取全部需传的参数。

第一次处理:

var arrObj = $("#applyForm").serializeArray();

        $.ajax({

            url:url,

            type:'post',

            dataType:'json',

            data:JSON.stringify(arrObj),

            success:function(data){


            }

            })


结果:失败,状态码415,不支持的类型。后台无法接收数据,

原因:arrObj经过serializeArray()之后实际变量变为{“name":“Lastname”,“value”:“王”,“name”:“sex”,“vlaue”:“女”},而json格式应该要求为{“Lastname”:“王”,“sex”:“女”}

第二次处理:

      var arrObj = $("#applyForm").serializeArray();

      var jsonObj = serializeJson(arrObj);

        $.ajax({

            url:url,

            type:'post',

            dataType:'json',

            contentType:'application/json',

            data:JSON.stringify(jsonObj),

            success:function(data){

            }

        })

        ......

        //序列化对象转json格式

    function serializeJson(arrObj){

        var obj={};

      $(arrObj).each(function(){

          if(obj[this.name]){

              if($.isArray(obj[this.name]) && this .value!=""){

                  obj[this.name].push(this.value);

              }else{

                  if(this .value != ""){

                      obj[this.name]=[obj[this.name],this.value];

                  }

              }

          }else{

              if(this .value != ""){

                  obj[this.name]=this.value;

              }

          }

      });

      return  obj;

    }

结果:可以接收serializeJson(arrObj)将变量转化为了json格式

去除RequestBody,即后台不要求以json格式接收对象

var arrObj = $("#applyForm").serialize();

        $.ajax({

            url:url,

            type:'post',

            dataType:'json',

            data:arrObj,

            success:function(data){


            }

            })

结果:成功,此处serialize()将表单参数转化为了形如 fristname=王&sex=女

注意

contentType:‘application/json’,可以向后台发送json格式

总结

知识点:

序列化和反序列化

Json语法规则:

1)数据在键值对中

2)数据由逗号分隔

3)花括号保存对象

4)方括号保存数组

contentType:‘application/json’

form-data和request pagload

状态码415的含义和场景

————————————————

版权声明:本文为CSDN博主「刀映绮罗」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/qq_37209834/article/details/102737565

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容