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实现下拉菜单的实例代码
Jun 19 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 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取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP多进程编程实例详解
2017/07/19 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
拖动时防止选中
2017/02/03 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
python中如何进行连乘计算
2020/05/28 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
护士专业推荐信
2013/11/02 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
《雪儿》教学反思
2014/04/17 职场文书
法制演讲稿
2014/09/10 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技