快捷導(dǎo)航

JS多個表單數(shù)據(jù)提交下的serialize()應(yīng)用實例分析

更新時間：2019年08月27日 11:21:52 作者：zhensg

這篇文章主要介紹了JS多個表單數(shù)據(jù)提交下的serialize()應(yīng)用,接合實例形式分析了原生javascript實現(xiàn)多個表單提交時serialize操作相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下

本文實例講述了JS多個表單數(shù)據(jù)提交下的serialize()應(yīng)用。分享給大家供大家參考，具體如下：

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

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

這個時候，出于不依賴jquery的考慮，有一個原生js函數(shù)來解決這個問題無疑是最好的。而源自于《JavaScript高級程序設(shè)計》一書的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ù)肯定不陌生；

但是如果我們傳遞的是一個對象，那么這個函數(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){
              //構(gòu)建對象
              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)對應(yīng)的對象數(shù)據(jù)。這個純粹是JSON.stringify()的要求。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: