SpringMVC接受json参数和jquery表单序列化-蒲公英云

SpringMVC接受json参数和jquery表单序列化

html代码

<form id="myform">
    user:<input type="text" name="username"><br>
    age:<input type="text" name="age" ><br>
    爱好:<input type="checkbox" name="hobby" value="篮球"> 篮球
    <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
    <input type="checkbox" name="hobby" value="足球"> 足球
</form>

1.传统方式接收参数，这里利用序列化时key-value的形式并且中间用&符号隔开

$('#formbtn').click(function () { 
            var serialize = $("#myform").serialize();
            console.log(serialize);
            $.post("/jsonTest",serialize,function (data) { 
                console.log(data);
            })
     });

2.jquery表单序列化转json对象插件

(function($){ 
            $.fn.serializeJson=function(){ 
                var serializeObj={ };
                var array=this.serializeArray();
                var str=this.serialize();
                $(array).each(function(){ 
                    if(serializeObj[this.name]){ 
                        if($.isArray(serializeObj[this.name])){ 
                            serializeObj[this.name].push(this.value);
                        }else{ 
                            serializeObj[this.name]=[serializeObj[this.name],this.value];
                        }
                    }else{ 
                        serializeObj[this.name]=this.value;
                    }
                });
                return serializeObj;
            };
        })(jQuery);

3.利用插件序列化表单

在这里插入图片描述
运行时当表单接受复杂类型的数组参数时提交失败，原因如下，在请求头中这种请求头的方式不支持复杂类型的传输

修改ajax请求代码如下，这里将json数据转换成了json字符串，在后台接收时使用requestBody接收

$.ajax({ 
      type:"post",
       url:"/jsonTest",
       data:JSON.stringify(serialize),
       contentType:"application/json;charset=UTF-8",
       success:function (data) { 
           alert(data);
       }
   });

后台代码

@RequestMapping("/jsonTest")
    @ResponseBody
    public String jsonTest(@RequestBody User user){ 
        System.out.println("测试json"+user);
        return "result";
    }

注意这里用到了json的依赖如下

<dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.8</version>
 </dependency>
 <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.8</version>
 </dependency>