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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
JQuery 实现文件下载的常用方法分析
Oct 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
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python实现的简单算术游戏实例
2015/05/26 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
python tkinter组件使用详解
2019/09/16 Python
python 实现屏幕录制示例
2019/12/23 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
python性能测试工具locust的使用
2020/12/28 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
公司离职证明范本
2014/01/13 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
答谢词范文
2015/01/05 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
消防安全培训工作总结
2015/10/23 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书