极念网欢迎您!
玩转javascript之自动绑定数据
作者:翅膀的初衷来源:本站原创发布时间:2014/7/3 23:16:29查看数:57382

如果我们需要通过ajax读取数据来呈现页面,一般会写类似于如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jiniannet.com 代码演示</title> </head> <body> <ul> <li><label>标题</label><input type="text" id="Title" name="Title" /></li> <li><label>时间</label><input type="text" id="CreateDate" name="CreateDate" /></li> <li><label>用户</label><input type="text" id="UserName" name="UserName" /></li> </ul> <script type="text/javascript"> $.ajax({ url:'News.json', type:'GET', success: function(json){ $("#CreateDate").val(json.CreateDate); $("#Title").val(json.Title); $("#UserName").val(json.UserName); } }); </script> </body> </html>

先通过ajax请求到数据,然后一个一个的为元素赋值,如果页面元素过多时,工作量相当大!

于是有的人就开始考虑模板引擎,但是模板引擎一般又比较大。

那么在这里,我教大家一种简单的方法,让JS自动请求页面,并在请求成功后绑定对象。使用简单,代码就二个函数。

原理,先在父元素上添加样式data-load,然后将相关请求参数,过滤函等配置到属性data-options上,然后在JS的onload事件中遍历$(".data-load")对象,然后根据配置参数自动进行AJAX请求。

看起来用法是不是跟easy-ui类似,没错,为了考虑尽量简单,我设计的配置方法跟eaysuyi是差不多的,这样可以减少上手难度。

请求成功后,然后再遍历此元素下所有具有样式data-bind的元素,根据不同的元素类型,将置绑定上去,至于哪个元素绑定哪个对象,根据对象上面的bind-field属性确定!

代码如下:

function autoSetData(dataJson,list) { var attr= null; for(var i=0;i<list.length;i++){ if (list[i]) { attr = list[i].getAttribute('bind-field'); if(!attr){ continue; } switch(list[i].tagName.toLowerCase()){ case "input": case "textarea": case "select": $(list[i]).val(dataJson[attr]); break; case "img": list[i].src = dataJson[attr]; break; default: $(list[i]).html(dataJson[attr]); break; } } } } $(function(){ $(".data-load").each(function(i){ var data = eval("({"+$(this).attr("data-options")+"})"); var children = $(this).find(".data-bind"); $.ajax({ url: data.url, type: "get", success: function (json) { if (json) { if(data.loadFilter){ autoSetData(data.loadFilter(json),children); }else{ autoSetData(json,children); } } else { alert('请求异常……'); } } }); }); });

使用时,只要如下配置即可:

<div class="bd data-load" data-options="url:'../Ajax/User/Information.aspx?v='+Math.random(),loadFilter:userLoadFilter"> <div class="form-horizontal" role="form" url="" class="data-load"> <h4>基本资料</h4> <div class="form-group"> <label class="col-sm-2 control-label">登录名:</label> <div class="col-sm-6"> <p class="form-control-static data-bind" bind-field="Account"></p> </div> </div> <div class="form-group"> <label for="UserName" class="col-sm-2 control-label">真实姓名:</label> <div class="col-sm-6"> <input type="text" class="form-control data-bind" bind-field="UserName" id="UserName" name="UserName" maxlength="10" value=""> </div> </div> <div class="form-group"> <label for="Gender" class="col-sm-2 control-label">性别:</label> <div class="col-sm-6"> <select id="Gender" name="Gender" class="form-control data-bind" bind-field="Gender"> <option value="1"></option> <option value="2"></option> </select> </div> </div> <h4>联系资料</h4> <div class="form-group"> <label for="CellPhone" class="col-sm-2 control-label">联系电话:</label> <div class="col-sm-6"> <input type="text" class="form-control data-bind" bind-field="CellPhone" id="CellPhone" name="CellPhone" value="$model.CellPhone" maxlength="20" placeholder="请重复输入新密码"> </div> </div> <div class="form-group"> <label for="Email" class="col-sm-2 control-label">电子邮箱:</label> <div class="col-sm-6"> <input type="text" class="form-control data-bind" bind-field="Email" id="Email" name="Email" value="$model.Email" maxlength="30" placeholder=""> </div> </div> <div class="form-group"> <label for="Address" class="col-sm-2 control-label">联系地址:</label> <div class="col-sm-6"> <input type="text" class="form-control data-bind" bind-field="Address" id="Address" maxlength="30" placeholder=""> </div> </div> <div class="form-group"> <label for="txtRePassword" class="col-sm-2 control-label"></label> <div class="col-sm-6"> <button type="button" class="btn btn-primary" id="btnUpdateInformation">保存</button> </div> </div> </div> </div>

本方法里面目前只支持二个参数,url:AJAX请求地址,loadFilter:可以在JSON请求成功后,对请求结果进行处理。如果需要,可以自行对配置增加参数,相当方便。

原创作品,转载请注明出处

尊重他人劳动成功,本站所有文章,不管是原创还是非原创,如果需要转载,请根据本页面中的作者与来源,保留原作者署名与链接(如果有的话)