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

川长思鸟来 2022-06-15 04:39 219阅读 0赞

### 前言： ###

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

### 知识点一：写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>
            密   码：<input type="password" name="password"><br>
            爱   好：吃饭<input type="checkbox" name="hobby" value="eat" checked/> 睡觉<input type="checkbox" name="hobby" value="sleep"/><br/>
            性   别：男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
            学   校： <select name="school">
                        <option value="yangguang">阳光小学</option>
                        <option value="xiwang">希望小学</option>
                        <option value="tiantian">天天小学</option>
                    </select>
            <br><br><br>
            <input type="submit" value="提交"/>   <input type="reset" value="重置" />
            <br> <br> <br>
            <input type="button" value="点我序列化为url" id="serializeUrl"/>  <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字符串

结果：  
![这里写图片描述][SouthEast]

### 这里我们传入参数： ###

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

结果为：  
![这里写图片描述][SouthEast 1]

### 注意： ###

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

[SouthEast]: /images/20220615/f136527a07a048b5b59335146a4012e7.png
[SouthEast 1]: /images/20220615/54ea8b282ffe4325806b08cc9b0d5b61.png