jquery的Form表單序列化到一個對象 (當radio,checkbox 未選中時，沒有序列化到對象中的解決方案）

表單序列化介紹

不少人都使用過jquery的serializeobject或serializeArray用來作表單的自動序列化到一個object對象。
這裏我也作個簡單的介紹，好比有一個表單以下：

經常使用的序列化js代碼:

$.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;
};


function saveForm(){
  var obj = $("#formDemo").serializeObject();
  console.log(obj);
}

獲取輸出的obj以下(而後就能夠經過ajax去保存數據了):

當radio,checkbox 未選中時存在的問題和解決辦法

通常狀況下，這樣去序列化數據沒有什麼問題，順利保存就行了，可是有一種更新的狀況下會致使問題。
設想剛纔咱們已經保存了這我的的愛好是運動和旅遊，可是當咱們不選擇任何一項興趣，保存數據結構就會變成這樣

{
    age:"18",
    nickname:"tangolivesky",
    sex:"1"
}

有沒有發現hobby這個字段沒有存在於數據結構中，當你把這樣的數據傳到後臺，通常後臺也是經過循環傳過來的json結構去更新數據庫，把須要更新的作update處理，這樣hobby這個字段就沒有更新掉。 等從新加載數據，遊戲，運動，旅遊仍是選中的。 :(

既然有這個問題，那就解決這個問題，把serializeObject作一個改動:

$.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 || '';
        }
    });
    var $radio = $('input[type=radio],input[type=checkbox]',this);
    $.each($radio,function(){
        if(!o.hasOwnProperty(this.name)){
            o[this.name] = '';
        }
    });
    return o;
};

輸出的結構就對了：

{
    age:"18",
    hobby:"",
    nickname:"tangolivesky",
    sex:""
}