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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现推拉门效果
Oct 19 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
德生H-501的评价与改造
2021/03/02 无线电
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
小谈php正则提取图片地址
2014/03/27 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
javascript call方法使用说明
2010/01/11 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python搜索算法原理及实例讲解
2020/11/18 Python
想学画画?python满足你!
2020/12/24 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
高中政治教学反思
2014/01/18 职场文书
司仪主持词两篇
2014/03/22 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
党员志愿者活动方案
2014/08/28 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers