form序列化 java接收_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:""

}