template.js 模板引擎

例子:

html代码：

<div id="box"></div>

css代码：

table{
    border-collapse: collapse;
    text-align: center;
    line-height: 2;
}
td{
    border: 1px solid #000;
}

json数据：

[
  {
    "name":"张三",
    "age":"23",
    "sex":"男"
  },
  {
    "name":"李四",
    "age":"26",
    "sex":"男"
  },
  {
    "name":"王五",
    "age":"18",
    "sex":"女"
  }
]

 

1、使用原生ajax方法

<script>
        function getXMLHttp(){
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();  //chrome ff
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHttp");  //ie
            }
            return xhr;
        }
        window.onload=function () {
            var xhr=getXMLHttp();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var data=JSON.parse(xhr.responseText);
                    var str="<table width='300'><tr><td>姓名</td><td>年龄</td><td>性别</td></tr>";
                    for(var i=0;i<data.length;i++){
                        str+="<tr>";
                        for(var key in data[i]){
                            str+="<td>"+data[i][key]+"</td>";
                        }
                        str+="</tr>"
                    }
                    document.getElementById("box").innerHTML=str;
                }
            }
            xhr.open("GET","userInfo.json");
            xhr.send();
        }
    </script>

 

2、使用jquery $.ajax方法:

<script>
        $.ajax({
            url:"userInfo.json",
            dataType:"json",
            success:function(data){
                var table=$("<table width='300'><tr><td>姓名</td><td>年龄</td><td>性别</td></tr>");
                $(data).each(function(index,element){
                    var tr=$("<tr></tr>");
                    $.each(element,function (i,e) {
                        tr.append($("<td>"+e+"</td>"));
                    })
                    table.append(tr);
                })
                $("#box").html(table);
            }
        })
    </script>

 

 

3、引入模板并用ajax方法使用：

<script src="jquery.min.js"></script>
<script src="template-native.js"></script>

<script type="text/template" id="t">
    <table width="300">
        <tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
    <%for(var i=0;i<userInfo.length;i++){%>
        <tr>
            <td><%=userInfo[i].name%></td>
            <td><%=userInfo[i].age%></td>
            <td><%=userInfo[i].sex%></td>
        </tr>
    <%}%>
    </table>
</script>
<script>
    $.ajax({
        url:"userInfo.json",
        dataType:"json",
        success:function(data){
            var userObj={
                userInfo:data
            }
            var str=template("t",userObj);
            $("#box").append(str);

        }
    })
</script>

 

浏览器效果：