jquery序列化及回填form数据

jquery序列化form

提交表单时取数大致有两种方式，1.用jquery找到所有值提交到后台，2.用工具自动序列化表单值。第一种代码量太大，所以使用第二种方式。

序列化

jquery序列化表单常用两种方式：serializeArray()、serialize()

• serializeArray() 方法通过序列化表单值来创建对象数组。
• serialize()则序列化成字符串。

序列化后添加变量

• serializeArray使用push({“name”:“sex”,“value”:“男”})
• serialize则拼接字符串 dataParam +"&"+“sex=男”

过滤元素

使用序列化时需要form中各元素包含name属性，若不包含则不会序列化。
某些字段不可用时disabled = “disabled”，序列化也会过滤掉。
若需要序列化但form表单不可用，使用 readonly属性。

回填数据

在开发中常遇到一种情况：
显示一条记录的详细内容，而在table中无法全量显示，这样就需要重新发请求获取数据回填到模态框或其他页面。但手动回填数据是一个量很大的工作，应提取工具类来完成。
下面使用jQuery的基础上来扩展了工具。

$.fn.loadJsonToForm = function(json){
    try{
        var key,value,tagName,type,arr;
        for(x in json){
            key = x;
            value = obj[x];
            this.find("[name='"+key+"']").each(function(){
                tagName = $(this)[0].tagName;
                type = $(this).attr('type');
                if(tagName=='INPUT'){
                    if(type=='radio'){
                        $(this).attr('checked',$(this).val()==value);
                    }else if(type=='checkbox'){
                        arr = value.split(',');
                        for(var i =0;i<arr.length;i++){
                            if($(this).val()==arr[i]){
                                $(this).attr('checked',true);
                                break;
                            }
                        }
                    }else{
                        $(this).attr('placeholder',value);
                    }
                }else if(tagName=='SELECT'){
                    $(this).selectpicker('val', value);
                }else if(tagName=='TEXTAREA'){
                    $(this).attr('placeholder',value);
                }

            });
        }
    }catch(e){
        alert("加载失败");
    }
}

这个方法使用了 this.find("[name=‘ssss’")，即找到该窗口下的所有匹配name。这样写的好处是确保赋值操作只在该form元素下。不会赋值给其他from里。这样强后端的代码都会减少（减少了html的修改name的量，可以使用同一个名字，也减少了后台从查询sql的量。不用来回改变名字以适应前端的字段名）。