欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery扩展方法实现Form表单与Json互相转换的实例代码

程序员文章站 2022-05-28 11:06:52
jquery笔记 记两段代码,使用jquery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上。 把表单转换出json对象 /...

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互相转换的实例代码,希望对大家有所帮助