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

本文实例讲述了框架实现获取形式表单内容及绑定数据到形式表单操作。分享给大家供大家参考，具体如下：

在日常开发的过程中，难免会用到形式表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串数据数据，要将数据绑定到形式表单上，这里我写了一个基于框架的，表单帮助插件，使用起来也很简单：

获取表单的数据：$('#formid ').serializeJson()；

绑定数据到表单：$('#formid ').setFOrm(JSON)；

jquery.formHelp.js插件

/** * 将形式里面的内容序列化成json *相同的检验盒用分号拼接起来* @param {dom}指定的选择器* @param {obj}需要拼接在后面的数据对象* @方法Serializejson * */$。fn。serialize JSON=function(OtherString){ var serialieobj={ }，array=this。SerializeArray()；$(数组)。每个（函数(){ if(SerializeoBj[this。name]){ SerializeoBj[this。名称]='；'这个值；} else { serializeObj[this。名称]=这个。价值；} });if(otherString！=未定义){ var other数组=其他字符串。拆分('；');$(其他阵列)。每个（函数(){ var OtherSplitArray=this。拆分(' : ')；serializeObj[other split array[0]]=other split array[1]；});}返回serializeObj }；/** * 将关于序列化对象赋值给表单* @param {dom}指定的选择器* @param {obj}需要给形式赋值的数据对象* @方法serializeJson * */$。fn。set form=function(JSonVaLue){ var obj=this；$.每个(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。拆分('；');for(var I=0；icheckboxobj . lengthi){ for(var j=0；jcheckarray . lengthj){ if(CheckBoxObj[I]).value==CheckArray[j]){ checkbox obj[I].单击();} } } } } else if($ oin put。attr(' type ')==' radio '){ $ oin put。每个(function(){ var radio obj=$('[name=' name ']')；for(var I=0；iradiobj . lentigi){ if(radio obj[I]).value==ival){ radioObj[i].单击();} } });} else if($ oinput)。attr(' type ')==' text area '){ obj。查找('[name=' name ']').html(ival)；} else{ obj.find('[name=' name ']').瓦尔（艾瓦尔);} })}html测试代码

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' titlejQueryFormHelp练习/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。js /脚本脚本src=' http : jquery。表单帮助。js /脚本脚本类型=' text/JavaScript ' $(function(){ $(' # form ')).setForm({a: '张三家的附近可考虑将，b: '王五，c: '王五，d: 'nishi yaldjlkfjal '，e:7，f : ' 8；10 '，i: '王'});});函数Submit FORm(){控制台。日志($(“# FORm”).serializeJson(' id :12；名称：13;'));}/script/head dyform id=' form ' divinput类型=' text ' name=' a '/div divinput类型=' text ' name=' b ' id=' b '/div divinput类型=' hidden ' name=' c ' id=' c '/div文本区域名称=' d ' row=' 8 ' cols=' 40 '/文本区域输入类型=' checkbox ' name=' f ' value=10 '/div选择名称=' e '选项值=' 5 '选定='选定' 5/王' /王输入名称='我'类型='收音机'值='小' /小/div输入类型=' button ' name=' g ' value=' Submit ' id=' g ' onclick=' Submit form()'//div/form/body/html使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery form操作技巧汇总》 、 《jQuery操作json数据技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery表格(table)操作技巧汇总》 及《jquery选择器用法总结》

希望本文对大家的jQuery程序设计有所帮助。