表单序列化

表单在js中可以使用表单字段的type属性连同其name属性和value属性来进行序列化

• 字段名和值是 URL 编码的并以和号（&）分隔。

• 禁用字段不会发送。

• 复选框或单选按钮只在被选中时才发送。

• 类型为”reset”或”button”的按钮不会发送。

• 多选字段的每个选中项都有一个值。

• 通过点击提交按钮提交表单时，会发送该提交按钮；否则，不会发送提交按钮。类型为”image”
  的元素视同提交按钮。

• select元素的值是被选中option元素的 value 属性。如果元素没有 value 属
  性，则该值是它的文本

  返回的结果是查询字符串的格式

function serialize(form){
    let parts=[];
    let optValue;
    for(let field of form.elements){
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if(field.name.length){
                    for(let option of field.options){
                        if(option.selected){
                            if(option.hasAttribute){
                                optValue=(option.hasAttribute("value")?option.value:option.text);
                            }else{
                                optValue=(option.attributes["value"].specified?option.value:option.text);
                            }
                            parts.push(`${encodeURIComponent(field.name)}=`+`${encodeURIComponent(optValue)}`);
                        }
                    }
                }
                break;
            case undefined://字段集
            case "file"://文件输入
            case "submit"://提交按钮
            case "reset"://重置按钮
            case "button"://自定义按钮
                break;
            case "radio"://单选按钮
            case "checkbox"://复选框
                if(!field.checked){//没被选中，跳出switch，否则进入default分支，将字段的名字和值编码后添加进parts数组
                    break;
                }
            default:
                //不包含没有名字的表单字段
                if(field.name.length){
                    parts.push(`${encodeURIComponent(field.name)}=`+`${encodeURIComponent(field.value)}`)
                }          
        }
    }
    return parts.join("&");
}