Jquery序列化form表单对象

Posted liusandy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery序列化form表单对象相关的知识,希望对你有一定的参考价值。

在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)

以上是关于Jquery序列化form表单对象的主要内容,如果未能解决你的问题,请参考以下文章

jQuery实现form表单序列化转换为json对象功能示例

jquery form 序列化成json对象

jquery怎样把表单中的值转换成json对象

jquery 表单序列化

jQuery序列化表单为JSON对象

Dajaxice 表单验证:“unicode 对象没有属性获取”(jquery 序列化)