jQuery - 基於serializeArray的serializeObject

將表單序列化成JSON對象，注意不管是自實現的serializeObject()還是原生的serializeArray()，所要序列化的控件都必須要有name,而不是id

jQuery.prototype.serializeObject=function(){
    var obj=new Object();
    $.each(this.serializeArray(),function(index,param){
        if(!(param.name in obj)){
            obj[param.name]=param.value;
        }
    });
    return obj;
};

jQuery.prototype.serializeObject=function(){
var obj=new Object();
$.each(this.serializeArray(),function(index,param){
if(!(param.name in obj)){
obj[param.name]=param.value;
}
});
return obj;
};

設有form中有username,password兩個input,看效果

$("form").serializeArray()

[{"name":"username","value":""},{"name":"password","value":""}]

$("form").serializeObject()
{"username":"","password":""}

serializeObject僅適用於name值不重復的情況,若name值重復,則取第一個

20150125更新
===========

+ 此版本不再兼容IE8
+ 修復一個邏輯錯誤

$.fn.serializeObject=function(){
    var hasOwnProperty=Object.prototype.hasOwnProperty;
    return this.serializeArray().reduce(function(data,pair){
        if(!hasOwnProperty.call(data,pair.name)){
            data[pair.name]=pair.value;
        }
        return data;
    },{});
};

另一種實現方式：

$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
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;
};

 

在JavaScript中，可以利用表單字段的type屬性，連同name和value屬性一起實現對表單的序列哈。在編寫代碼之前，有必要搞清楚在表單提交期間，瀏覽器是怎樣將數據發送給服務器的。

• 對表單字段的名稱和值進行URL編碼，使用和號（&）分割。
• 不發送禁用的表單字段。
• 只發送勾選的復選框和單選按鈕。
• 不發送type為“reset”和“button”的按鈕。
• 多選擇框中的每個選中的值單獨一個條目。
• 在單擊提交按鈕提交表單的情況下，也會發送提交阿牛；否則，不發送提交按鈕。也包括type為“image”的<input>元素。
• <select>元素的值，就是選中的<option>元素的value特性的值。如果<option>元素沒有value特性，則是<option>元素的文本值。

jQuery.serializeArray() 函數詳解

serializeArray()函數用於序列化一組表單元素，將表單內容編碼為一個JavaScript數組。

serializeArray()函數常用於將表單內容序列化為JSON對象，以便於被編碼為JSON格式的字符串。

該函數會將可用於提交的每個表單控件封裝成一個Object對象，該對象有name和value屬性，對應該表單控件的name和value屬性。然后將這些Object對象封裝為一個數組並返回。

該函數不會序列化不需要提交的表單控件，這和常規的表單提交行為是一致的。例如：不在<form>標簽內的表單控件不會被提交、沒有name屬性的表單控件不會被提交、帶有disabled屬性的表單控件不會被提交、沒有被選中的表單控件不會被提交。

與常規表單提交不一樣的是：常規表單一般會提交帶有name的按鈕控件，而serializeArray()函數不會序列化帶有name的按鈕控件。更多詳情請點擊這里。

該函數屬於jQuery對象(實例)。

語法

jQuery 1.2 新增該函數。

jQueryObject.serializeArray( )

返回值

serializeArray()函數的返回值為Array類型，返回將表單元素編碼后的JS數組。

示例&說明

請參考下面這段初始HTML代碼：

<form name="myForm" action="http://www.365mini.com" method="post">
    <input name="uid" type="hidden" value="1" />
    <input name="username" type="text" value="張三" />
    <input name="password" type="text" value="123456" />
    <select name="grade" id="grade">
        <option value="1">一年級</option>
        <option value="2">二年級</option>
        <option value="3" selected="selected">三年級</option>
        <option value="4">四年級</option>
        <option value="5">五年級</option>
        <option value="6">六年級</option>
    </select>
    <input name="sex" type="radio" checked="checked" value="1" />男
    <input name="sex" type="radio" value="0" />女
    <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
    <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
    <input name="hobby" type="checkbox" value="3" />羽毛球
    <input name="btn" id="btn" type="button" value="點擊" />
</form>

對<form>元素進行序列化可以直接序列化其內部的所有表單元素。

var formArray = $("form").serializeArray();
/* 以下是序列化后的結果數組formArray的內容：
[
    { name: "uid", value: "1" },
    { name: "username", value: "張三" },
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "sex", value: "1" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/

我們也可以直接對部分表單元素進行序列化。

var result = $(":text, select, :checkbox").serializeArray();
/* 以下是序列化后的結果數組result的內容：
[ 
    { name: "username", value: "張三" }, 
    { name: "password", value: "123456" },
    { name: "grade", value: "3" },
    { name: "hobby", value: "1" },
    { name: "hobby", value: "2" }
];
*/