这是上一篇将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="提交" οnclick="javascript:alert($('#myform').formtojson());"/>
<input type="button" value="填充" οnclick="a()"/>
<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); } } } } }
测试效果:
填充前的页面:
填充之后的效果:
以上代码,有兴趣的朋友,欢迎拿去测试,如果有不对的地方,还请不另相告。