原生JS实现表单序列化serialize()

有一个form表单，要用AJAX后台提交，原来想拼接json，但是数据多了麻烦，不灵活。

用HTML5的FormData来初始化表单

var formdata=new FormData(document.getElementById("advForm"));

看似还可以，但发现有两个问题，

一，formdata.get()方法不知为什么用不了

二，Form Data 数据格式不如Jq的简洁，

WebKitFormBoundary29h06FRZequJgQtR

        var stu={
            name:"冷荣富",
            age:22,
            sex:"男"
        };
        $.ajax({
            type : "POST",  //提交方式
            url : "http://localhost/jsonTest.php",//路径,www根目录下
            data : {
                "student" : stu
            },//数据，这里使用的是Json格式进行传输
            success : function(result) {//返回数据根据结果进行相应的处理
                alert(result);
            }
        });

这段JQ提交的数据是序列化的

网查如然不用我造*了，转一个可用的

使用原生的js模拟了表单序列化，代码中对表单处理尽可能地进行文字说明
其中对于url，字段名称，中文进行了使用了encodeURIComponent()进行编码。

Object.prototype.serialize = function(){
    var res = [],   //存放结果的数组
        current = null, //当前循环内的表单控件
        i,  //表单NodeList的索引
        len, //表单NodeList的长度
        k,  //select遍历索引
        optionLen,  //select遍历索引
        option, //select循环体内option
        optionValue,    //select的value
        form = this;    //用form变量拿到当前的表单，易于辨识

    for(i=0, len=form.elements.length; i<len; i++){

        current = form.elements[i];

        //disabled表示字段禁用，需要区分与readonly的区别
        if(current.disabled) continue;

        switch(current.type){
            //可忽略控件处理
            case "file":    //文件输入类型
            case "submit":  //提交按钮
            case "button":  //一般按钮
            case "image":   //图像形式的提交按钮
            case "reset":   //重置按钮
            case undefined: //未定义
                break;
            //select控件
            case "select-one":
            case "select-multiple":
                if(current.name && current.name.length){
                    console.log(current)
                    for(k=0, optionLen=current.options.length; k<optionLen; k++){
                        option = current.options[k];
                        optionValue = "";
                        if(option.selected){
                            if(option.hasAttribute){
                                optionValue = option.hasAttribute('value') ? option.value : option.text
                            }else{
                                //低版本IE需要使用特性 的specified属性，检测是否已规定某个属性
                                optionValue = option.attributes('value').specified ? option.value : option.text;    
                            }
                        }
                        res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(optionValue));
                    }
                }
                break;

            //单选，复选框
            case "radio":
            case "checkbox":
                //这里有个取巧 的写法，这里的判断是跟下面的default相互对应。
                //如果放在其他地方，则需要额外的判断取值
                if(!current.checked) break;

            default:
                //一般表单控件处理
                if(current.name && current.name.length){
                    res.push(encodeURIComponent(current.name) + "=" + encodeURIComponent(current.value));
                }
        }
    }
    return res.join("&");
}

对HTML表单使用：

formElement.serialize();

得到类似如下结果：a=1&b=2&c=3&d=4&e=5

相关链接：https://blog.csdn.net/qq_35087256/article/details/81253559

原生JS实现表单序列化serialize()

相关推荐