说说 JavaScript 实现表单序列化的解决方案（附源码）

Ajax 的流行，导致了表单序列化需求非常普遍。表单提交时，浏览器是这样把数据发送给服务器的：

• 对表单字段的名称和值进行 URL 编码，使用 & 分隔。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选按钮。
• 不发送 type 为 “reset” 和 “button” 的按钮。
• 多选的选择框的每一个选中的值会单独列一个条目。
• 只有在单击提交按钮（包括 type 为 image 的 <input> 元素）提交表单时，会发送提交按钮。
• <select> 元素的值，就是选中的 <option> 元素的 value 属性值，如果 <option> 元素没有 value 属性，那么就是 <option> 元素的文本值。

表单序列化代码如下：

<script type="text/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) {//如果不存在 value 属性或者它为空字符串，就使用文本属性                                optValue = "";                                if (option.hasAttribute) {//DOM                                    optValue = (option.hasAttribute("value") ? option.value : option.text);                                } else {//IE                                    optValue = (option.attributes["value"].specified ? option.value : option.text);                                }                                parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));                            }                        }                    }                    break;                case undefined://字段集（fieldset）                case "file"://文件输入                case "submit"://提交按钮                case "reset"://重置按钮                case "button"://自定义按钮                    break;//不处理                case "radio"://单选按钮                case "checkbox"://复选框                    if (!field.checked) {//没有选中，则直接进入下一迭代                        break;                    }                //执行默认操作                default:                    //不包含没有名字的表单字段                    if (field.name.length) {                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));                    }            }        }        return parts.join("&");    }</script>