序列化表单数据

在前公司的项目里，遇到过一个需求，需要将整个表单的数据提出来序列化成字符串，然后使用AJAX来

提交数据，

当时凭着经验写了一个，工作的还不错，没有出现过问题，现在想来，当时写的很不严谨，我缺少了很

多验证和测试的步骤，最明显的一点是，我甚至说不清到底哪些表单控件的值才是真正会被提交的>_<.

所以一个详细的测试是不可缺少的,我写了一个放置了所有表单元素的页面，使用fiddler监控了提交的数据，测试结果如下:

注：在这个测试中，我并没有选择文件进行上传，而是直接点击了submit按钮。

从图中我们可以看到浏览器们只对两个地方存在分歧:

1.只有 IE6,IE7 都会提交<button></button>的value

2.而Chrome则没有提交<input type="file" />

第2个分歧在进一步测试时被纠正，Chrome的处理方式是，如果你不选择文件，那么就不提交file域的

名字和值，否则才会提交.

而第1个则非常奇怪，其他浏览器似乎都无视了<button>，只有ie给于了关注，而通过查资料，我得到

更多的信息:

当 BUTTON 元素在表单中提交的话，Microsoft® Internet Explorer 5 及以后版本将提交 VALUE 标签

属性，

若存在的话。否则就提交 innerText 属性。在 Internet Explorer 4.0 中，只会提交 innerText 值

。

（这个结果非常有趣，所以你的button最好别加name属性，否则可能会提交很多数据）

知道了具体会上传啥东西，本着节省传输数据量的精神,我们就可以做个总结。

首先button是要被干掉的，因为其他浏览器均不支持，放上去也只是浪费字节

file域我们可以采用Chrome的处理方式，只有选择文件后才会被提交,但是AJAX无法上传文件，所以实际上file域没有意义，可以不提交

radio组和checkbox组同上，一组中有一个（或多个）被选中的值会被提交，如果一个也没选中，都不

会被提交

select只提交选中的值，如果没有一个选中的，那么提交第一项

select multiple 只提交选中的值，如果没有一个选中的，那么不会被提交

其余的控件不管有没有值都会被提交

剩下需要的提交的就是

<input type="text" />

<input type="password" />

<input type="hidden" />

<input type="submit" />

<input type="radio" /> //选择选中的

<input type="checkbox" />//选择选中的

<input type="file" />

<select></select>

<select multiple></select>

<textarea></textarea>

最后就是需要给所有的值做转义，有能力给这个表单序列化结果附加更多的数据

我的实现如下:

 

 1 function FormDataSerialize( form /*HTMLFormElement*/,attachParams /* Object */ )

 2 { 

 3     var encode = encodeURIComponent, 

 4     currCon, 

 5     currTag, 

 6     currVal,    

 7     currType, 

 8     currName,    

 9     currOpts, 

     currOpt,

     temp,

     result   = [], 

     els      = form.elements, 

     iTypeReg = /^checkbox|radio$/i, 

     bTypeReg = /^button|reset|image$/i,

     A = Array;

 

     for( var l = els.length; l--;  )

     {

         currCon   = els[ l ];

         currTag   = currCon.tagName.toLowerCase();

         currType  = currCon.type;

         currVal   = currCon.value;

         currName  = currCon.name;    

         

         if( currTag == 'button' ||   //如果是button,忽略掉                 

             ( iTypeReg.test( currType ) && currCon.checked === false )  || //如果是radio或checkbox,而且checked为false，忽略掉

             ( bTypeReg.test( currType ) || //如果是type=button,type=reset,type=image的控件，忽略掉

             ( currType == 'file' ) )  //如果是file域 ，忽略掉            

         ) continue;  

 

         if( currCon.multiple === true && currType == 'select-multiple' ) //如果是多选框,遍历options特殊处理

         {

             currOpts = currCon.options;

             for( var m = currOpts.length; m--;  )

                 ( currOpt = currOpts[m] ).selected && 

                 ( result.push( encode( currName ) + '=' + encode( currOpt.value ) ) );

             continue;

         }

 

         //其余的只需要取value就好

         result.push( encode( currName ) + '=' + encode( currVal ) );

     }

     

     //处理附加的数据

     for( var item in attachParams )

     { 

         if( ( temp = attachParams[ item ] ) instanceof A )  //数组使用多选框处理方式

             for( l = temp.length; l-- ; ) result.push( encode( item ) + '=' + encode( temp[l] ) );

         else result.push( encode( item ) + '=' + encode( temp ) ); //其余直接取key=value就好

     } 

     

     //最后加上分隔符的&

     return result.join('&');

 }

 

 

 使用方式:

 var dataStr = FormDataSerialize( document.getElementById( 'myForm' ),

 {

     username : 'wait',

     password : '123456789',

     keys     : [ 1,2,3,4,5 ]

 });

 

 

OK，函数基本上就是这个样子了，还有有些可以改进的地方，比如 attachParams 可以接受string类型的。

上面也说了，这个函数一般都用在AJAX提交数据上。显然这个需求很旺盛，于是Firefox在版本4内置了一个 FormData 对象.

它4这样子用滴：

 var formData = new FormData();

 formData.append("username", "Groucho");

 formData.append("accountnum", 123456);

 formData.append("afile", fileInputElement.files[0]);

 

 xhr.open("POST", "http://foo.com/submitform.php");

 xhr.send(formData);

 

 不但可以无中生有，还可以直接从form对象导出FormData对象：

 var formElement = document.getElementById("myFormElement");

 formData = formElement.getFormData();

 formData.append("serialnumber", serialNumber++);

 xhr.send(formData);

 

 看起来真的很好用蛤，但是，比较恶心银的是它不会被转换成字符串，formData本身就是一个对象，也只能用在AJAX的send方法里。

FormData参考:

https://developer.mozilla.org/en/XMLHttpRequest/FormData

https://developer.mozilla.org/En/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects

 

 2009/7/9 update:

今天对FormData做了一些更详细的测试，原来FromData并不是像我想象的那样， 它的存在主要是为了解决上传文件的问题，也就是说，

如果你的表单中有许多控件，包括文件域，这时候你想同时用AJAX提交这些混合内容， 就可以使用FormData了（可以用AJAX上传文件已经是一个惊喜了）。

 

FormData 要求表单必须使用 method="post" enctype="multipart/form-data"  (GET是无效的，什么也不会被传递)

而且FormData传递的数据也完全跟表单正常post一模一样，类似如下：

 

-----------------------------29962268197975

Content-Disposition: form-data; name="input-text"

text-value

-----------------------------29962268197975

Content-Disposition: form-data; name="input-hidden"

hidden-value

-----------------------------29962268197975

Content-Disposition: form-data; name="input-password"

password

-----------------------------29962268197975

Content-Disposition: form-data; name="input-radio-group"

radio-group-4

  

看来是我高兴早了，FormData是没有办法完全代替FormDataSerialize函数的功能的。