表单（四）表单序列化

表单序列化的作用是：将表单内容序列化成一个字符串,方便Ajax传递表单值给服务器。

---

【浏览器把表单数据提交到服务器的细节】：

1. 对字段的名和值进行URL编码，并使用“&”分隔
2. 不发送禁用的字段 disabled
3. 多选框中每个选中的名值对是单独的一个条目
4. 在<select>元素中，option如果没有value特性，则值为option的文本值text
5. 不发送button、reset、submit、file字段的名值对

var form = document.getElementById("表单ID");
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.hasAttribute){
                            optValue = (option.hasAttribute("value")? option.value : option.text);
                        }
                        //IE
                        else{
                            optValue = (option.attributes["value"].specified ? option.value : option.text);
                        }
                        parts.push(encodeURIComponent(field.name) +"="+ encodeURIComponent(optValue));
                    }
                }
                break;
            case undefined:  //fieldset元素没有type属性
            case "file":
            case "button":
            case "reset":
            case "submit":
                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("&");
}