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

来源：动视网责编：小采时间：2020-11-27 22:12:00

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

jQuery实现获取form表单内容及绑定数据到form表单操作分析:本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作。分享给大家供大家参考，具体如下：在日常开发的过程中，难免会用到form表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串json数据，要将数据绑定到form表单上，这里我

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现获取form表单内容及绑定数据到form表单操作分析:本文实例讲述了jQuery实现获取form表单内容及绑定数据到form表单操作。分享给大家供大家参考，具体如下：在日常开发的过程中，难免会用到form表单，我们需要获取表单的数据保存到数据库，或者拿到后台的一串json数据，要将数据绑定到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测试运行效果如下：