jquery的Form表单序列化到一个对象 (当radio,checkbox 未选中时，没有序列化到

jiekechoo 发布于2019-08-22 11:01 / 1251人阅读

摘要：表单序列化介绍很多人都使用过的或用来做表单的自动序列化到一个对象。等重新加载数据，游戏，运动，旅游还是选中的。既然有这个问题，那就解决这个问题，把做一个改动输出的结构就对了

表单序列化介绍

很多人都使用过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表单序列化格式化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

I_Am 2019-08-02 16:05 评论0 收藏0
如何使用纯 CSS 制作四子连珠游戏

摘要：序言你是否想过单纯使用也可以制作一款游戏甚至可以双人对决这是一篇非常有趣的文章，作者详细讲解了使用纯制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。在本文中，我将介绍使用纯制作的四子连珠游戏的关键思想。序言：你是否想过单纯使用 CSS 也可以制作一款游戏？甚至可以双人对决！这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问...

waltr 2019-08-29 16:43 评论0 收藏0