你的位置:首页 > Java教程

[Java教程]jquery获取form表单内容以及绑定数据到form表单


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

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

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

jquery.formHelp.js插件

/** * 将form里面的内容序列化成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测试代码

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>jQueryFormHelp练习</title>  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>  <script src="jquery.formHelp.js"></script>  <script type="text/javascript">  $(function () {    $("#form").setForm({a: '张三家的附近可考虑将', b: '王五', c: '王五', d: 'nishi yaldjlkfjal ',e:7,f:'8;10',i:'王'});  });  function submitForm(){    console.log($("#form").serializeJson('id:12;name:13;'));  }</script></head><body><form id="form">  <div><input type="text" name="a" /></div>  <div><input type="text" name="b" id="b" /></div>  <div><input type="hidden" name="c" id="c" /></div>  <div>    <textarea name="d" rows="8" cols="40"></textarea>    <input type="checkbox" name="f" value="10"/>  </div>  <div><select name="e">    <option value="5" selected="selected">5</option>    <option value="6">6</option>    <option value="7">7</option>  </select></div>  <div>    <input type="checkbox" name="f" value="8" />    <input type="checkbox" name="f" value="9"/>  </div>  <div>    <input name="i" type="radio" value="王" />王    <input name="i" type="radio" value="小" />小  </div>  <div>    <input type="button" name="g" value="Submit" id="g" onclick="submitForm()"/>  </div></form></body></html>

 

 其他推荐文章链接:

JavaScript模式设计

JavaScript模式设计之单例模式

JavaScript模式设计之构造函数模式

JavaScript模式设计之建造者模式

JavaScript模式设计之工厂模式

JavaScript模式设计之代理模式

JavaScript模式设计之命令模式