系统学习前端之表单序列化

表单序列化

1. 概述

随着Ajax的出现,表单的序列化已经是一个常见的需求。我们先明确表单提交时,浏览器是怎么样将数据发送给服务器的

  • 对表单字段的名称和值进行URL编码(调用encodeURIComponent()方法),使用&分隔,无论是get还是post请求,都是一样的

  • 不发送禁用的表单字段,即属性disabled为true的

  • 只发送勾选的复选框和单选按钮

  • 不发送type为reset和button的按钮

  • 多选选择框中每个选择的值单独一个条目

  • 在单击提交按钮表单的情况下,也会发送提交按钮的value值,否则不发送提交按钮。

  • select元素的值,就是选中的option元素的value属性的值,如果option元素没有value属性,则是option元素的文本值。

2. 实现

跟据上述,我们可以来实现一个表单的序列化,代码是对《JavaScript高级程序设计》表单脚本一章中的代码改进

  1. 增加参数验证

  2. 将form.elements转为数组,提高性能

  3. 改进多选选择框,同一个参数名的值进行合并,试验了一下,如果options没有HTML的value属性,读取该option的value属性会等于它的text属性(测试浏览器 IE8,chrome)

function serialize(form) {
    // 参数验证
    if(!form && form.nodeName.toUpperCase() != "FORM" ){
        throw new Error("invalid parameters");
    }
    
    var encode = window.encodeURIComponent,
        slice = Array.prototype.slice;

    var params = [],
        i = 0,
        fields = slice.call(form.elements),
        len = fields.length,
        el,
        type;

    for(;i < len; i++){
        el = fields[i];
        type = el.type.toLowerCase();
        switch(type){
            case  "undefined":
            case  "button":
            case  "submit":
            case  "reset":
            case "file":
                break;
            case "select-one":
            case "select-multiple":
                if(el.name.length){
                    var j = 0, 
                        opts = slice.call(el.options),
                        oLen = opts.length,
                        selected = [] , // 用于合并参数
                        opt;            
                    for(; j < oLen; j++){
                        opt = opts[j];
                        if(!opt.selected)continue;
                        selected.push(opt.value);
                    }
                    params.push(encode(el.name) + "=" + encode(selected.join(",")));
                }
                break;
            case "checkbox":
            case "radio":
                if(!el.checked){
                    break;
                }   
            default:
                if(el.name.length){
                    params.push(encode(el.name) + "=" + encode(el.value));
                }
        }
    }
    return params.join("&");
};

以上代码在IE8会报错,原因是option元素的实现并非一个JavaScript对象,导致无法使用slice,当然解决的方法也有,就是重写slice函数,但是这脱离了本章节的主题。

参考

  1. 《JavaScript高级程序设计》

    原文作者:zhangguixu
    原文地址: https://segmentfault.com/a/1190000006714445
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞