jquery 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>

以上就是jquery获取form表单内容以及绑定数据到form表单的全部内容，希望对大家的学习有所帮助。