本文實例講述了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()的要求。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
