4

表单序列化介绍


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

十年
1k 声望32 粉丝

干过后端