JavaScript之form表单的序列化和json化[form.js]

Posted 2020-10-14 千千寰宇

一、应用场景

　　　　form提交时，使用ajax提交。

二、效果

　　　　通过本工具，实现表单所有form的快速序列化和json化，使前端人员在ajax提交form表单的时，脱离重复性的，大劳动量的手动抽取form属性和对应的值。

三、源码[form.js]

　　　　

//将数据序列化成 url请求方式的编码
function serialize(form){
    var len=form.elements.length;//表单字段长度;表单字段包括<input><select><button>等
    var field=null;//用来存储每一条表单字段
    var parts=[];//保存字符串将要创建的各个部分
    var opLen,//select中option的个数
        normalValue,//text,number,date,textarea的值
        opValue;//select中option的值
    //遍历每一个表单字段
    for(var i=0;i<len;i++){
        field=form.elements[i];
        /*检测每一个表单字段的类型，做出不同的处理：
        *1.最麻烦的就是select：它可能是单选框也可能是多选框，这里的代码适合于这两种框。在找到一个选中的项之后，需要确
        *定使用什么值。如果不存在value特性或者虽然存在但是值为空字符串，都要使用选项的文本来代替。为查这个属性，在DOM兼
        *容的浏览器中使用hasAttribute()方法，在IE中需要使用特性的specified属性。
        *2.表单中如果包括<fieldset>
        *元素，则该元素会出现在表单集合中但是没有type属性。因此，如果type属性未定义，则不必对其进行序列化；同样，对于
        *各种按钮以及文件输入字段都是如此。
        *3.对于单选按钮和复选框，要检查其checked属性是否被设置为false,如果是则退出switch语句，如果checked属性为true
        *则继续进行default内容，即将当前的名称和值进行编码，然后添加到parts数组中。函数的最后一步就是使用join格式化整
        *个字符串，也就是用和好来分隔每一个表单字段
        */
        switch(field.type){
            case"select-one":
            case"select-multiple":
                            if(field.name.length){
                                for(var j=0,opLen=filed.options.length;j<opLen;j++){
                                    option=field.options[j];
                                    if(option.selected){
                                        opValue=‘‘;
                                        if(option.hasAttribute){
                                            opValue=(option.hasAttribute(‘value‘)?option.value:option.text);
                                        }else{
                                            opValue=(option.hasAttribute[‘value‘].specified?option.value:option.text);//IE下
                                        }
                                        parts.push(encodeURIComponent(field.name) + ‘=‘ + encodeURIComponent(opValue));
                                    }

                                }
                            }
                            break;
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                        break;
            case "text":
            case "number":
            case "date":
            case "textarea":
                if(field.name.length){
                    normalValue = field.value;
                    parts.push(encodeURIComponent(field.name)+‘=‘+encodeURIComponent(normalValue));
                }
                break;
            case "radio":
            case "checkbox":
                if(!field.checked){
                    break;
                }
            default:
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name)+‘=‘+encodeURIComponent(opValue));
                }
                break;
        }
    }
    return parts.join("&");
}

//将form数据字符串化成符合json格式的字符串
function stringify(form){
    var len=form.elements.length;//表单字段长度;表单字段包括<input><select><button>等
    var field=null;//用来存储每一条表单字段
    var parts=[];//保存字符串将要创建的各个部分
    var opLen,//select中option的个数
        normalValue,//text,number,date,textarea的值
        opValue;//select中option的值
    //遍历每一个表单字段
    for(var i=0;i<len;i++){
        field=form.elements[i];
        /*检测每一个表单字段的类型，做出不同的处理：
        *1.最麻烦的就是select：它可能是单选框也可能是多选框，这里的代码适合于这两种框。在找到一个选中的项之后，需要确
        *定使用什么值。如果不存在value特性或者虽然存在但是值为空字符串，都要使用选项的文本来代替。为查这个属性，在DOM兼
        *容的浏览器中使用hasAttribute()方法，在IE中需要使用特性的specified属性。
        *2.表单中如果包括<fieldset>
        *元素，则该元素会出现在表单集合中但是没有type属性。因此，如果type属性未定义，则不必对其进行序列化；同样，对于
        *各种按钮以及文件输入字段都是如此。
        *3.对于单选按钮和复选框，要检查其checked属性是否被设置为false,如果是则退出switch语句，如果checked属性为true
        *则继续进行default内容，即将当前的名称和值进行编码，然后添加到parts数组中。函数的最后一步就是使用join格式化整
        *个字符串，也就是用和好来分隔每一个表单字段
        */
        switch(field.type){
            case"select-one":
            case"select-multiple":
                            if(field.name.length){
                                for(var j=0,opLen=filed.options.length;j<opLen;j++){
                                    option=field.options[j];
                                    if(option.selected){
                                        opValue=‘‘;
                                        if(option.hasAttribute){
                                            opValue=(option.hasAttribute(‘value‘)?option.value:option.text);
                                        }else{
                                            opValue=(option.hasAttribute[‘value‘].specified?option.value:option.text);//IE下
                                        }
                                        parts.push(encodeURIComponent(‘"‘+ field.name + ‘":"‘) + encodeURIComponent(opValue)) + ‘"‘;
                                    }

                                }
                            }
                            break;
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;
            case "text":
            case "number":
            case "date":
            case "textarea":
                if(field.name.length){
                    normalValue = field.value;
                    parts.push(‘"‘ + field.name + ‘":"‘ + normalValue.trim() + ‘"‘);
                }
                break;
            case "radio":
            case "checkbox":
                if(!field.checked){
                    break;
                }
            default:
                if(field.name.length){
                    parts.push(‘"‘ + field.name + ‘":"‘ + normalValue+ ‘"‘);
                }
                break;
        }
    }
    return ‘{‘ + parts.join(‘,‘) + ‘}‘;
}

 

四、注意

　　json字符串实例化为json对象时，对json字符串的格式有严格规定，属性名和属性值必须用双引号引起，否则在调用JSON转化时，将报错，且实例化失败。