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

jiekechoo 發布于2019-08-22 11:01 / 1273人閱讀

摘要：表單序列化介紹很多人都使用過的或用來做表單的自動序列化到一個對象。等重新加載數據，游戲，運動，旅游還是選中的。既然有這個問題，那就解決這個問題，把做一個改動輸出的結構就對了

表單序列化介紹

很多人都使用過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:""
}

GPU云服務器云服務器表單序列化 js表單序列化 js 序列化表單數據類型 js表單序列化格式化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91633.html

form表單那點事兒(下) 進階篇

摘要：在表單提交時，瀏覽器會自動進行一系列的校驗工作，沒有通過校驗的表單是無法提交到服務器的。而方法提交表單，會在請求中發送表單字段鍵值對。表單提交事件表單提交到服務器時，會觸發事件。上一篇主要溫習了一下form表單的屬性和表單元素，這一片主要講解用JavaScript如何操作form。表單操作取值用JavaScript操作表單，免不了會有取值賦值操作，比如有以下表單： ...

jerryloveemily 2019-08-01 15:24 評論0 收藏0
讀Zepto源碼之Form模塊

摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發事件，提交表單。最終返回的結果是一個數組，每個數組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發 submit 事件，提交表單。讀 Zepto 源碼系列文章已...

陳江龍 2019-08-21 17:12 評論0 收藏0
如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

waltr 2019-08-29 16:43 評論0 收藏0
如何使用純 CSS 制作四子連珠游戲

摘要：序言你是否想過單純使用也可以制作一款游戲甚至可以雙人對決這是一篇非常有趣的文章，作者詳細講解了使用純制作四子連珠游戲的思路以及使用奇淫巧技解決困難問題的方法。在本文中，我將介紹使用純制作的四子連珠游戲的關鍵思想。序言：你是否想過單純使用 CSS 也可以制作一款游戲？甚至可以雙人對決！這是一篇非常有趣的文章，作者詳細講解了使用純 CSS 制作四子連珠游戲的思路以及使用奇淫巧技解決困難問...

I_Am 2019-08-02 16:05 評論0 收藏0