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>
发布了47 篇原创文章 · 获赞 6 · 访问量 2194

猜你喜欢

转载自blog.csdn.net/weixin_44467251/article/details/102732250