SpringMVC框架-19:表单序列化

第一步：引入插件代码

(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);

第二步：准备一个form

<form id="myform">
    user:<input type="text" name="user_name"><br>
    age:<input type="text" name="user_age"><br>
    爱好:<input type="checkbox" name="hobby" value="篮球"> 篮球
    <input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
    <input type="checkbox" name="hobby" value="足球"> 足球
</form>
<input type="button" id="formbtn" value="发送form">

第三步：准备ajax代码发送请求

$(function () {
        $("#formbtn").click(function () {
            var jsonDormData = $("#myform").serializeJson(); //这里我们就是用的插件代码，使获取表单的数据并序列化数据，
            if (typeof jsonDormData.hobby =="string"){ //这里有一个判断，因为我们后面的domian类字段的hobby类型为一个数组，所以这里必须转成数组
                jsonDormData.hobby = new Array(jsonDormData.hobby);
            }

            $.ajax({
                type: "POST",
                url: "/jsondata",
                data: JSON.stringify(jsonDormData),//使用这个方法将序列化的数据真正的变成一个json类型的数据
                contentType:'application/json',//告诉服务器，只能以json的格式接收数据
                success: function (msg) {
                    alert("成功");
                },
                error:function () {
                    alert("失败");
                }
            });
        });


    })

第四步：后端接收数据

因为前端要求必须以json格式接收数据，所以这里要有一个@RequestBody的注解

@Controller
public class JSONController {
    @RequestMapping("/jsondata")
    @ResponseBody
    public String test1(@RequestBody User user){
        System.out.println(user);
        return "success";
    }
}

domain类的属性类型

@Data
public class User {
    private String user_name;
    private String user_age;
    private Integer user_sex;
    private String[] hobby;//爱好
    private Pet pet;
}