快捷導(dǎo)航

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

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

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

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

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

之所以要進(jìn)行多表單的數(shù)據(jù)傳遞是因?yàn)榭梢赃M(jìn)行數(shù)據(jù)分組，便于數(shù)據(jù)的維護(hù)。

這個(gè)時(shí)候，出于不依賴jquery的考慮，有一個(gè)原生js函數(shù)來解決這個(gè)問題無疑是最好的。而源自于《JavaScript高級(jí)程序設(shè)計(jì)》一書的serialize()函數(shù)就是解決這個(gè)問題的最好辦法，該函數(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("&");
}

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

但是如果我們傳遞的是一個(gè)對(duì)象，那么這個(gè)函數(shù)顯然就不符合要求，而在這個(gè)開發(fā)需求下，我們改下這個(gè)函數(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ù)改為對(duì)象形式
                  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)建對(duì)象
              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ù)改為對(duì)象顯示。如果有多個(gè)表單將表單保存到一個(gè)數(shù)組之中，利用JSON.stringify()轉(zhuǎn)為json格式，傳給后端；

注意:

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

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

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

您可能感興趣的文章: