[原创]利用jquery将给定的json字符串向表单中自动填充

这是上一篇将form转换成json的反向,即将json往form中自动填充，有了这两个封装好了的jquery插件，就可以方便的实现mvc各层之间的数据传递了，再也不写恶心人的那些代码了。目前支持的表单控件元素有限，现这样用倒再说，以后再加！

 

网页:

<div style="width:400px;background-color:#CCCCCC;padding:10px">
	<form id="myform">
		<p>
		姓名:<input type="text" value="wangsir" id="uname" name="uname"/>
		</p>
		<p>
		怩称:<input type="text" value="风一样的男子" id="nikename" name="nikename"/>
		</p>
		<p>
		密码:<input type="password" value="123456" id="pwd" name="pwd"/>
		</p>
		<p>
		性别:<select name="sex" id="sex">
		              <option selected value=1>男</option>
					  <option value=0>女</option>
			 </select>
		</p>
		<p>
		婚姻状态：<input type="radio" name="married"  value="yes"/>已婚<input type="radio" name="married" value="no">未婚
		</p>
		<p>
		个人爱好:
		<input type="checkbox" name="fav" value="足球">足球
		<input type="checkbox" name="fav" value="台球" >台球
		<input type="checkbox" name="fav" value="羽毛球">羽毛球
		</p>
		<p>
		择偶标准:
		<input type="checkbox" name="standard" value="高">高
		<input type="checkbox" name="standard" value="帅">帅
		<input type="checkbox" name="standard" value="富">富
		</p>
		<p>
		目标城市:<select name="city" id="city"><option selected value="wh">武汉</option><option value="other">外省</option></select>
		</p>
		<p>
		头像:<input type="text" readonly value="./images/head.jpg" id="headpic" name="headpic"><img src="./images/head.jpg" width=64px height=64px id="headpic" />
		</p>
		<p>
		受教育经历:
		<textarea rows="6" cols="50" id="eduhistory" name="eduhistory" value="" width="200px" height="180px"></textarea>
		</p>
		<p>
		<input type="button" value="提交" onclick="javascript:alert($('#myform').formtojson());"/>&nbsp;
		<input type="button" value="填充" onclick="a()"/>&nbsp;
		<input type=reset value="取消" />
		</p>
	
	</form>
</div>

 

 

 

脚本:

 

<script language="javascript">
String.prototype.lTrim = function() 
　　{ 
　　return this.replace(/^'/,""); 
　　};//去掉左面空格; 
　　String.prototype.rTrim = function() 
　　{ 
　　return this.replace(/'*$/,""); 
　　};//去掉右面空格; 
　　String.prototype.Trim = function() 
　　{ 
　　return this.lTrim().rTrim(); 
　　};//记得各句后都有分号

function a(){
		var jsonstring="uname:'Alicezhang',nikename:'美女',sex:'0',married:'no',"+
               "fav:'足球|羽毛球',standard:'帅|富',city:'other',"+
			   "headpic:'./images/head2.jpg',pwd:'1234567890',eduhistory:'i am a student!'"
	    alert("要填充的json及填充前的界面:"+jsonstring);
		$('#myform').jsontoform(jsonstring);
}

$.fn.jsontoform=function(jsonstring){
   var formid="#"+$(this).attr("id") ;//input,textarea,select;
   var objs=jsonstring.split(',');
   for(i=0;i<objs.length;i++){
     var kvs=objs[i].split(':');
	 //alert(kvs.length);
	 var k=kvs[0];
	 var v=kvs[1].Trim();
	 //alert(k+"  "+v);
	 selector="[name='"+k+"']";
	 //alert(selector);
	 //alert($(selector).length);
	 if($(selector).length>0){
	   for(j=0;j<$(selector).length;j++){
	      //text or password 
	   	  if($(selector).attr("type")=="text"||$(selector).attr("type")=="password"){
		     $(selector).val(v);
		  }
		  //combo select 
		  if($(selector).attr("type")==null&&$(selector).length==1){
			  if($("select"+selector).length==1){
				  for(n=0;n<$(selector+" option").length;n++){
				    //alert(n+":"+$(selector+" option:eq("+n+")").val()+"["+$(selector+" option:eq("+n+")").html()+"]==?=="+v);
					if($(selector+" option:eq("+n+")").val()==v){
					   $(selector+" option:eq("+n+")").attr("selected",true);
					   break;
					}
				  };
			  }
		  }
		  // checkbox
		  if($(selector).attr("type")=="checkbox"){
		     var checkboxselector="input[type='checkbox'][name='"+k+"']";
			 var options=v.split('|');
			 for(m=0;m<options.length;m++){
			    for(k=0;k<$(checkboxselector).length;k++)
				{
				   if($(checkboxselector+":eq("+k+")").val()==options[m]){
				      $(checkboxselector+":eq("+k+")").attr("checked",true);
				   }
				}
			 }
		  }
		  //readio
		  if($(selector).attr("type")=="radio"){
		     var radioselector="input[type='radio'][name='"+k+"']";
			 for(k=0;k<$(radioselector).length;k++){
			    if($(radioselector+":eq("+k+")").val()==v){
				   $(radioselector+":eq("+k+")").attr("checked",true);
				}
			 }
		  }
		  
		 //textarea
		  if($("textarea[name='"+k+"']").length==1){
		      $("textarea[name='"+k+"']").val(v);
		  }
		  
	     
	   }
	 }
	 
   }
}

 

测试效果:

填充前的页面：

 

填充之后的效果:

 

以上代码，有兴趣的朋友，欢迎拿去测试，如果有不对的地方，还请不另相告。