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

前言:

我们在开发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;
                }

调用方法:

下面是案例代码:


<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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字符串

结果:
jQuery表单序列化为json对象插件_第1张图片

这里我们传入参数:

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

结果为:
jQuery表单序列化为json对象插件_第2张图片

注意:

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

你可能感兴趣的:(jquery,表单,json,jquery插件,插件,jquery笔记)