JS中如何使用serialize()

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

具體如下：

在實際開發場景中，難免遇到需要多個表單的數據傳遞問題。

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

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

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高級程序設計》的小伙伴來說，這個函數肯定不陌生；

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

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);
                  }
                  //將數據改為對象形式
                  Object.defineProperty(parts, encodeURIComponent(field.name), {
                    value:encodeURIComponent(optValue),
                    enumerable:true //為真表示可枚舉，只有可枚舉才能出現在JSON.stringify()轉換的json數據中
                  });
                }
              }
            }
            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  //為真表示可枚舉，只有可枚舉才能出現在JSON.stringify()轉換的json數據中
                  });
            }
        }
      }
      console.log(parts);
      return parts;
}

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

注意:

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

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