玩转javascript之自动绑定数据-Javascript-极念网

玩转javascript之自动绑定数据

作者：翅膀的初衷来源：本站原创发布时间：2014/7/3 23:16:29查看数：57823

如果我们需要通过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请求成功后，对请求结果进行处理。如果需要，可以自行对配置增加参数，相当方便。

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

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