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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
jQuery实现简单弹幕制作
Dec 10 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
用户的详细注册和判断
2006/10/09 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
PHP运行模式的深入理解
2013/06/03 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
Python实现的Excel文件读写类
2015/07/30 Python
Python实现单词翻译功能
2017/06/06 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
客服实习的个人自我鉴定
2013/10/20 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
病危通知书样本
2015/04/17 职场文书
贫困生证明范文
2015/06/16 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书