jQuery扩展方法实现Form表单与Json互相转换的实例代码


Posted in jQuery onSeptember 05, 2018

JQuery笔记

记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上。

把表单转换出json对象

//把表单转换出json对象
  $.fn.toJson = function () {
    var self = this,
      json = {},
      push_counters = {},
      patterns = {
        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
        "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
        "push": /^$/,
        "fixed": /^\d+$/,
        "named": /^[a-zA-Z0-9_]+$/
      };
    this.build = function (base, key, value) {
      base[key] = value;
      return base;
    };
    this.push_counter = function (key) {
      if (push_counters[key] === undefined) {
        push_counters[key] = 0;
      }
      return push_counters[key]++;
    };
    $.each($(this).serializeArray(), function () {
      // skip invalid keys
      if (!patterns.validate.test(this.name)) {
        return;
      }
      var k,
        keys = this.name.match(patterns.key),
        merge = this.value,
        reverse_key = this.name;
      while ((k = keys.pop()) !== undefined) {
        // adjust reverse_key
        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');
        // push
        if (k.match(patterns.push)) {
          merge = self.build([], self.push_counter(reverse_key), merge);
        }
        // fixed
        else if (k.match(patterns.fixed)) {
          merge = self.build([], k, merge);
        }
        // named
        else if (k.match(patterns.named)) {
          merge = self.build({}, k, merge);
        }
      }
      json = $.extend(true, json, merge);
    });
    return json;
  };

将josn对象赋值给form,使表单控件也显示相应的状态

//将josn对象赋值给form
  $.fn.loadData = function (obj) {
    var key, value, tagName, type, arr;
    this.reset();
    for (var x in obj) {
      if (obj.hasOwnProperty(x)) {
        key = x;
        value = obj[x];
        this.find("[name='" + key + "'],[name='" + key + "[]']").each(function () {
          tagName = $(this)[0].tagName.toUpperCase();
          type = $(this).attr('type');
          if (tagName == 'INPUT') {
            if (type == 'radio') {
              if ($(this).val() == value) {
                  $(this).attr('checked', true);
              }
            } else if (type == 'checkbox') {
              arr = value.split(',');
              for (var i = 0; i < arr.length; i++) {
                if ($(this).val() == arr[i]) {
                    $(this).attr('checked', true);
                  break;
                }
              }
            } else {
              $(this).val(value);
            }
          } else if (tagName == 'SELECT' || tagName == 'TEXTAREA') {
            $(this).val(value);
          }
        });
      }
    }
  }

补充:下面看下jQuery两种扩展方法

在jQuery中,有两种扩展方法

1.类方法($.extend())

<script> 
   $.extend({
    print1:function(name){      //print1是自己定义的函数名字,括号中的name是参数
      console.log(name)
    }
  });
   $.print1("坤") ;              //调用时直接$.函数名(参数);
</script>

2.对象方法($.fn.extend())

<body>
  <input type="text">
  <script>
      $.fn.extend({
      getMax:function(a,b){
        var result=a>b?a:b;
        console.log(result);
      }
    });
    $("input").getMax(1,2);    //调用时要$(标签名).函数名();
  </script>
</body>

3.一般情况下,jQuery的扩展方法写在自执行匿名函数中(原因:在js中是以函数为作用域的,在函数中写可以避免自己定义的函数或者变量与外部冲突)

<script>
  (function(){
    $.extent({
      print1:function(){
      console.log(123);
      }
    })
  })();
</script>

总结

以上所述是小编给大家介绍的jQuery扩展方法实现Form表单与Json互相转换的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
详解jQuery中的easyui
Sep 02 #jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
jQuery解析json格式数据示例
Sep 01 #jQuery
jQuery实现表格隔行换色
Sep 01 #jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
You might like
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
Python中functools模块函数解析
2017/03/12 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python 实现判断图片格式并转换,将转换的图像存到生成的文件夹中
2020/01/13 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
城市创卫标语
2014/06/17 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
各种货币符号快捷输入
2022/02/17 杂记