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.form.js异步提交表单详解
Apr 25 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
8个出色的WordPress SEO插件收集
2011/02/26 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python用threading实现多线程详解
2017/02/03 Python
python3设计模式之简单工厂模式
2017/10/17 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python实现FTP循环上传文件
2020/03/20 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python多分支if语句的使用
2020/09/03 Python
数学教学随笔感言
2014/02/17 职场文书
装修活动策划方案
2014/08/27 职场文书
实习协议书范本
2014/09/25 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
办公经费申请报告
2015/05/15 职场文书
教研活动主持词
2015/07/03 职场文书