jQuery实现获取form表单内容及绑定数据到form表单操作分析

本文实例讲述了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>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：