jquery form表单获取内容以及绑定数据

在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使用起来也很简单:

获取表单的数据:$("#formid").serializeJson();

绑定数据到表单:$("#formid").setForm(json);

jquery.formHelp.js插件

内容序列化成json * 相同的checkBox用分号拼接起来 * @param {dom} 指定的选择器 * @param {obj} 需要拼接在后面的json对象 * @method serializeJson * */ $.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
  • @param {dom} 指定的选择器
  • @param {obj} 需要给form赋值的json对象
  • @method serializeJson
  • */
    $.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);
    }
    })
    }

html测试代码

Meta charset="UTF-8"> jQueryFormHelp练习