jQuery 获取form表单内容及数据回显

时间：2024-02-26 08:43:01

在我们提交form表单到后台的时候需要获取字段内容 以及 编辑表单内容时从后台获取到数据时需要进行数据回显到form表单的字段值

下面将这2种方式抽取出来，可以放在公共js部分  然后在需要使用的时候去引入它

//将form里面的内容序列化成json数据
$.fn.serializeJson=function(otherString){
    var serializeObj={},
        array=this.serializeArray();
    $(array).each(function(){
        if(serializeObj[this.name]){
            serializeObj[this.name]+=\';\'+this.value;
        }else{
            serializeObj[this.name]=this.value;
        }
    });
    if(otherString!=undefined){
        var otherArray = otherString.split(\';\');
        $(otherArray).each(function(){
            var otherSplitArray = this.split(\':\');
            serializeObj[otherSplitArray[0]]=otherSplitArray[1];
        });
    }
    return serializeObj;
};

//将josn对象赋值给form--》即数据回显
$.fn.setForm = function(jsonValue){
    var obj = this;
    $.each(jsonValue,function(name,ival){
        var $oinput = obj.find("input[name="+name+"]");
        if($oinput.attr("type")=="checkbox"){
            if(ival !== null){
                var checkboxObj = $("[name="+name+"]");
                var checkArray = ival.split(";");
                for(var i=0;i<checkboxObj.length;i++){
                    for(var j=0;j<checkArray.length;j++){
                        if(checkboxObj[i].value == checkArray[j]){
                            checkboxObj[i].click();
                        }
                    }
                }
            }
        }
        else if($oinput.attr("type")=="radio"){
            $oinput.each(function(){
                var radioObj = $("[name="+name+"]");
                for(var i=0;i<radioObj.length;i++){
                    if(radioObj[i].value == ival){
                        radioObj[i].click();
                    }
                }
            });
        }
        else if($oinput.attr("type")=="textarea"){
            obj.find("[name="+name+"]").html(ival);
        }
        else{
            obj.find("[name="+name+"]").val(ival);
        }
    })
}

数据回显：

//数据回显  #zq_form：获取id为zq_form的form表单  id为表单需要绑定的属性，data.id为后台返回的数据值
$("#zq_form").setForm({id:data.id,name: data.name, icon:data.icon,...});

获取表单内容：

//#zq_form:id="form"的表单 
$("#zq_form").serializeJson(\'id:1;name:2;\')

 

相关文章