《JavaScript高级程序设计》读书笔记14.4表单序列化

• 在 JavaScript 中，可以利用表单字段的 type 属性，连同name和value属性一起实现对表单的序列化。

• 有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的：

  1. 对表单字段的名称和值进行 URL 编码，使用和号（&）分隔。
  2. 不发送禁用的表单字段。
  3. 只发送勾选的复选框和单选按钮。
  4. 不发送type为”reset”和”button”的按钮。
  5. 多选选择框中的每个选中的值单独一个条目。
  6. 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括 type为”image”的<input>元素。
  7. <select>元素的值，就是选中的<option>元素的value特性的值。如果<option>元素没有value特性，则是<option>元素的文本值。

• 在表单序列化过程中，一般不包含任何按钮字段。

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){
                            optValue = "";
                            
                            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){
                    break;
                }
                /* 执行默认操作 */

            default:
                //不包含没有名字的表单字段
                if (field.name.length){
                    parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
                }
        }
    }
    return parts.join("&");
}