Jquery序列化form表单对象

Posted 2021-01-15 liusandy

在web开发过程中，难免需要提交表单，js提交表单数据需要将所有input控件的值全部获得，然后组合成一个JSONObject对象传入后台，难免有些麻烦和琐碎，有好几种方法可以获得全部的表单数据，今天介绍其中一种序列化serialize()方式；

• serialize()

$("#myForm").seroalize()
# myFrom 为form标签的id；

把id为myForm的form标签内所有的控件全部序列化成json字符串；如：

key1=value1&key2=value2
key：是控件的name属性值

• serializeArr()

$("#myForm").seroalizeArr()
# myFrom 为form标签的id；

把id为myForm的form标签内所有的控件全部序列化成json字符串并添加到一个数组；如：

[
    {key1:value1},
    {key2:value2}
]
key：是控件的name属性值

• serializeObject()

$("#myForm").seroalizeArr()
# myFrom 为form标签的id；

把id为myForm的form标签内所有的控件全部序列化成JSONObject；如：

{
    key1:value1,
    key2:value2
}
key：是控件的name属性值

但是jquery没有内置serializeObject()方法，需要对重写该方法

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || ‘‘);
        } else {
            o[this.name] = this.value || ‘‘;
        }
    });
    return o;
};

但是在ajax请求时，使用该方法获得的对象直接传入后台会有400错误，这时候需要添加headers、和contentType；同时需要对获得对象转化成字符串类型；

var formData = $("#myForm").serializeObject();
console.log(formData);
$.ajax({
    url: product.url.insert(),
    type: "POST",
    headers: {
        Accept: "text/html, application/xhtml+xml, */*"
    },
    contentType: ‘application/json;charset=utf-8‘,
    data: JSON.stringify(formData),
    async: false,
    dataType: ‘JSON‘,
    success: function (res) {
    }
    error:function(){
    }

如果 控件name 值和javaBean字段值相同，那么后台可以直接接受该对象参数，不需要每个字段写一个参数，使用@RequesBody注解修饰；

public String test(@RequesBody User user)