jQuery表单序列化为json对象插件

来源：互联网发布：珠宝销售软件编辑：程序博客网时间：2024/05/22 08:26

前言：

我们在开发web的时候，往往会用到表单的序列化，这里写了一个表单序列化的插件，第一次写可能还不是很好！上一篇转载的文章介绍了如何写jQuery插件，如果有看不懂的jQuery插件的可以参考一下上一篇文章！

知识点一：写Jquery插件

插件代码：

(function ($) {    $.fn.getFormJSON = function (options) {        var defaultSetting = $.extend({ //设置默认值            "isRepeat": true //是否开启多个值的输入控件，例如复选框、多选的select        }, options);        var jsonObj = {};        if (defaultSetting.isRepeat) {            $.each(this.serializeArray(), function () {                var $name = this.name;                if (jsonObj[$name]) {//判断jsonObj里面是否有数据                    if ($.isArray(jsonObj[$name])) {//判断jsonObj的属性是否是数组                        jsonObj[$name].push(this.value);                    } else {                        jsonObj[$name] = [jsonObj[$name], this.value];                    }                } else {                    jsonObj[$name] = this.value;                }            });        } else {            $.each(this.serializeArray(), function () {                var $name = this.name;                if (!(jsonObj[$name])) {//判断jsonObj内是否有this.name属性 ---只保留第一个值                    jsonObj[$name] = this.value;                }            });        }        return jsonObj;    };})(jQuery);

代码解读：

1.    var defaultSetting = $.extend({ //设置默认值            "isRepeat": true //是否开启多个值的输入控件，例如复选框、多选的            select        }, options);    作用：设置传出参数的默认值2.   if (defaultSetting.isRepeat) {          //isRepeat为true的时，可以得到选中的复选框，多选下拉框的所有值        } else {           //只能得到选中的复选框、多选下来框的第一个选中的值         }3.    $.each(this.serializeArray(), function () {              //遍历this.serializeArray()后的结果            });4.  if (jsonObj[$name]) {//判断jsonObj里面是否有数据                    if ($.isArray(jsonObj[$name])) {//判断jsonObj的属性是否是数组                        jsonObj[$name].push(this.value);                    } else {                        jsonObj[$name] = [jsonObj[$name], this.value];                    }                } else {                    jsonObj[$name] = this.value;                }

调用方法：

下面是案例代码：

<!DOCTYPE html><html lang="zh"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.2.1.js"></script>    <script src="../js/myPlus.js"></script></head><body>    <form method="post" action="#" id="test_form">        用户名：<input type="text" name="username"/><br>        密 &nbsp; 码：<input type="password" name="password"><br>        爱 &nbsp; 好：吃饭<input type="checkbox" name="hobby" value="eat" checked/> 睡觉<input type="checkbox" name="hobby" value="sleep"/><br/>        性 &nbsp; 别：男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>        学 &nbsp; 校： <select name="school">                    <option value="yangguang">阳光小学</option>                    <option value="xiwang">希望小学</option>                    <option value="tiantian">天天小学</option>                </select>        <br><br><br>        <input type="submit" value="提交"/> &nbsp;&nbsp;<input type="reset" value="重置" />        <br> <br> <br>        <input type="button" value="点我序列化为url" id="serializeUrl"/>&nbsp;&nbsp;<input type="button" value="点我序列化为json" id="serializeJson"/>    </form><script>        $(function () {            $("#serializeUrl").click({"name":"zxy"},function () {                testJquerySerializeUrl();            });            $("#serializeJson").click({},function () {              var j = $("#test_form").getFormJSON();              alert(JSON.stringify(j));            });        });        function testJquerySerializeUrl() {            var serializeUrl = $("#test_form").serialize();            alert("序列化为url格式为："+serializeUrl);        }</script></body></html>

特别提示：

      $("#serializeJson").click({},function () {              var j = $("#test_form").getFormJSON();//这里没有传参数，默认为true              alert(JSON.stringify(j));            });说明：　插件放回的json对象，而不是json字符串，这里要使用JSON.stringify()方法转化为json字符串

结果：
这里写图片描述

这里我们传入参数：

        $("#serializeJson").click({},function () {              var j = $("#test_form").getFormJSON({"isRepeat":false});              alert(JSON.stringify(j));            });

结果为：
这里写图片描述

注意：

1. 在使用插件之前一定要到插件文件导入：<script src="../js/myPlus.js"></script>

阅读全文

0 0