在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表單對象