多个表单数据提交下的serialize()应用

Posted 2020-10-28 造轮子

在实际开发场景中，难免遇到需要多个表单的数据传递问题。

之所以要进行多表单的数据传递是因为可以进行数据分组，便于数据的维护。

这个时候，出于不依赖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()的要求。

本文结束。