JS中如何使用serialize()

這篇文章主要介紹了JS中如何使用serialize()，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

做網(wǎng)站、成都網(wǎng)站制作的關注點不是能為您做些什么網(wǎng)站，而是怎么做網(wǎng)站，有沒有做好網(wǎng)站，給創(chuàng)新互聯(lián)一個展示的機會來證明自己，這并不會花費您太多時間，或許會給您帶來新的靈感和驚喜。面向用戶友好，注重用戶體驗，一切以用戶為中心。

具體如下：

在實際開發(fā)場景中，難免遇到需要多個表單的數(shù)據(jù)傳遞問題。

之所以要進行多表單的數(shù)據(jù)傳遞是因為可以進行數(shù)據(jù)分組，便于數(shù)據(jù)的維護。

這個時候，出于不依賴jquery的考慮，有一個原生js函數(shù)來解決這個問題無疑是最好的。而源自于《JavaScript高級程序設計》一書的serialize()函數(shù)就是解決這個問題的最好辦法，該函數(shù)如下:

function serialize(form){
      var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
      for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
          case "select-one":
          case "select-multiple":
            if (field.name.length){
              for (j=0, optLen = field.options.length; j < optLen; j++){
                option = field.options[j];
                if (option.selected){
                  optValue = "";
                  if (option.hasAttribute){
                    optValue = (option.hasAttribute("value") ? option.value : option.text);
                  } else {
                    optValue = (option.attributes["value"].specified ? option.value : option.text);
                  }
                  parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                }
              }
            }
            break;
          case undefined:   //fieldset
          case "file":    //file input
          case "submit":   //submit button
          case "reset":    //reset button
          case "button":   //custom button
            break;
          case "radio":    //radio button
          case "checkbox":  //checkbox
            if (!field.checked){
              break;
            }
            /* falls through */
          default:
            //don't include form fields without names
            if (field.name.length){
              parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
            }
        }
      }
      console.log(parts);
      return parts.join("&");
}

對于讀過《JavaScript高級程序設計》的小伙伴來說，這個函數(shù)肯定不陌生；

但是如果我們傳遞的是一個對象，那么這個函數(shù)顯然就不符合要求，而在這個開發(fā)需求下，我們改下這個函數(shù)，改造后函數(shù)如下

function serialize(form){
      var parts = {},
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
      for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
          case "select-one":
          case "select-multiple":
            if (field.name.length){
              for (j=0, optLen = field.options.length; j < optLen; j++){
                option = field.options[j];
                if (option.selected){
                  optValue = "";
                  if (option.hasAttribute){
                    optValue = (option.hasAttribute("value") ? option.value : option.text);
                  } else {
                    optValue = (option.attributes["value"].specified ? option.value : option.text);
                  }
                  //將數(shù)據(jù)改為對象形式
                  Object.defineProperty(parts, encodeURIComponent(field.name), {
                    value:encodeURIComponent(optValue),
                    enumerable:true //為真表示可枚舉，只有可枚舉才能出現(xiàn)在JSON.stringify()轉(zhuǎn)換的json數(shù)據(jù)中
                  });
                }
              }
            }
            break;
          case undefined:   //fieldset
          case "file":    //file input
          case "submit":   //submit button
          case "reset":    //reset button
          case "button":   //custom button
            break;
          case "radio":    //radio button
          case "checkbox":  //checkbox
            if (!field.checked){
              break;
            }
            /* falls through */
          default:
            //don't include form fields without names
            if (field.name.length){
              //構建對象
              Object.defineProperty(parts, encodeURIComponent(field.name), {
                    value:encodeURIComponent(field.value),
                    enumerable:true  //為真表示可枚舉，只有可枚舉才能出現(xiàn)在JSON.stringify()轉(zhuǎn)換的json數(shù)據(jù)中
                  });
            }
        }
      }
      console.log(parts);
      return parts;
}

于是，表單數(shù)據(jù)改為對象顯示。如果有多個表單將表單保存到一個數(shù)組之中，利用JSON.stringify()轉(zhuǎn)為json格式，傳給后端；

注意:

利用Object.defineProperty創(chuàng)建對象，要加上 enumerable:true，否則json格式中不會出現(xiàn)對應的對象數(shù)據(jù)。這個純粹是JSON.stringify()的要求。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS中如何使用serialize()”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

文章題目：JS中如何使用serialize()
瀏覽路徑：http://muchs.cn/article44/jpesee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、微信公眾號、品牌網(wǎng)站設計、網(wǎng)站設計公司、搜索引擎優(yōu)化、動態(tài)網(wǎng)站

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

猜你還喜歡下面的內(nèi)容