在实际开发场景中，难免遇到需要多个表单的数据传递问题。
之所以要进行多表单的数据传递是因为可以进行数据分组，便于数据的维护。
这个时候，出于不依赖jquery的考虑，有一个原生js函数来解决这个问题无疑是最好的。而源自于《JavaScript高级程序设计》一书的serialize()函数就是解决这个问题的最好办法，该函数如下:
1 function serialize(form){ 2 var parts = [], 3 field = null, 4 i, 5 len, 6 j, 7 optLen, 8 option, 9 optValue; 10 11 for (i=0, len=form.elements.length; i < len; i++){ 12 field = form.elements[i]; 13 14 switch(field.type){ 15 case "select-one": 16 case "select-multiple": 17 18 if (field.name.length){ 19 for (j=0, optLen = field.options.length; j < optLen; j++){ 20 option = field.options[j]; 21 if (option.selected){ 22 optValue = ""; 23 if (option.hasAttribute){ 24 optValue = (option.hasAttribute("value") ? option.value : option.text); 25 } else { 26 optValue = (option.attributes["value"].specified ? option.value : option.text); 27 } 28 parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue)); 29 } 30 } 31 } 32 break; 33 34 case undefined: //fieldset 35 case "file": //file input 36 case "submit": //submit button 37 case "reset": //reset button 38 case "button": //custom button 39 break; 40 41 case "radio": //radio button 42 case "checkbox": //checkbox 43 if (!field.checked){ 44 break; 45 } 46 /* falls through */ 47 48 default: 49 //don‘t include form fields without names 50 if (field.name.length){ 51 parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value)); 52 } 53 } 54 } 55 console.log(parts); 56 return parts.join("&"); 57 }
对于读过《JavaScript高级程序设计》的小伙伴来说，这个函数肯定不陌生；
但是如果我们传递的是一个对象，那么这个函数显然就不符合要求，而在这个开发需求下，我们改下这个函数，改造后函数如下
1 function serialize(form){ 2 var parts = {}, 3 field = null, 4 i, 5 len, 6 j, 7 optLen, 8 option, 9 optValue; 10 11 for (i=0, len=form.elements.length; i < len; i++){ 12 field = form.elements[i]; 13 14 switch(field.type){ 15 case "select-one": 16 case "select-multiple": 17 18 if (field.name.length){ 19 for (j=0, optLen = field.options.length; j < optLen; j++){ 20 option = field.options[j]; 21 if (option.selected){ 22 optValue = ""; 23 if (option.hasAttribute){ 24 optValue = (option.hasAttribute("value") ? option.value : option.text); 25 } else { 26 optValue = (option.attributes["value"].specified ? option.value : option.text); 27 } 28 //将数据改为对象形式 29 Object.defineProperty(parts, encodeURIComponent(field.name), { 30 value:encodeURIComponent(optValue), 31 enumerable:true //为真表示可枚举，只有可枚举才能出现在JSON.stringify()转换的json数据中 32 }); 33 } 34 } 35 } 36 break; 37 38 case undefined: //fieldset 39 case "file": //file input 40 case "submit": //submit button 41 case "reset": //reset button 42 case "button": //custom button 43 break; 44 45 case "radio": //radio button 46 case "checkbox": //checkbox 47 if (!field.checked){ 48 break; 49 } 50 /* falls through */ 51 52 default: 53 //don‘t include form fields without names 54 if (field.name.length){ 55 //构建对象 56 Object.defineProperty(parts, encodeURIComponent(field.name), { 57 value:encodeURIComponent(field.value), 58 enumerable:true //为真表示可枚举，只有可枚举才能出现在JSON.stringify()转换的json数据中 59 }); 60 61 } 62 } 63 } 64 console.log(parts); 65 return parts; 66 }
于是，表单数据改为对象显示。如果有多个表单将表单保存到一个数组之中，利用JSON.stringify()转为json格式，传给后端；
注意:
利用Object.defineProperty创建对象，要加上 enumerable:true，否则json格式中不会出现对应的对象数据。这个纯粹是JSON.stringify()的要求。
本文结束。
