jQuery擴展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的實例代碼

JQuery筆記

為故城等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及故城網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、故城網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

記兩段代碼，使用JQuery實現(xiàn)從表單獲取json與后端交互，以及把后端返回的json映射到表單相應(yīng)的字段上。

把表單轉(zhuǎn)換出json對象

//把表單轉(zhuǎn)換出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，使表單控件也顯示相應(yīng)的狀態(tài)

//將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是自己定義的函數(shù)名字，括號中的name是參數(shù)
      console.log(name)
    }
  });
   $.print1("坤") ;              //調(diào)用時直接$.函數(shù)名(參數(shù));
</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);    //調(diào)用時要$(標(biāo)簽名).函數(shù)名();
  </script>
</body>

3.一般情況下，jQuery的擴展方法寫在自執(zhí)行匿名函數(shù)中（原因：在js中是以函數(shù)為作用域的，在函數(shù)中寫可以避免自己定義的函數(shù)或者變量與外部沖突）

<script>
  (function(){
    $.extent({
      print1:function(){
      console.log(123);
      }
    })
  })();
</script>

總結(jié)

以上所述是小編給大家介紹的jQuery擴展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站題目：jQuery擴展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的實例代碼
標(biāo)題網(wǎng)址：http://bm7419.com/article28/jjcdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站維護、自適應(yīng)網(wǎng)站、微信小程序、手機網(wǎng)站建設(shè)、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司