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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 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
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
Javascript函数的参数
2015/07/16 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python实现求数列和的方法示例
2018/01/12 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python使用插值法画出平滑曲线
2018/12/15 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
阿尔卡特(中国)的面试题目
2014/08/20 面试题
运动会入场口号
2014/06/07 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
担保书格式范文
2015/09/22 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS