表单序列化介绍
很多人都使用过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:""
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。