dot.js异步加载数据

1引入cdn

https://cdnjs.com/libraries/dot

2如何使用dot.js

分为三部分：

第一部分表示，你要动态添加的html代码位置。

第二部分表示，你要动态拼接的html标签和数据格式。

第三部分表示，dot.js获取后台传递的json数组，和html标签进行拼接，并添加到第一部分的位置。

需要注意的地方：

(1) 这里的interText和 dataInter不是固定了，只是变量，可以换名字。

(2) 在第二部分中，可以直接使用js代码，但是每一行js需要用 {{ }}括起来。

(3) 第二部分除了可以也在<script></script>中，也可以写在隐藏属性的标签中。写在其他标签中也可以执行，但是会被打印出来。

dot.js练习

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dot/1.1.0/doT.min.js" integrity="sha256-0DJpUBhIByZ5Tm5u/xEvcRalEiuyadItx381FmBKHB4=" crossorigin="anonymous"></script>
	<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<table width="50%" border="1" class="moreff">
  <tr>
    <td>姓名</td>
    <td>电话</td>
    <td>助力值</td>
    <td>时间</td>
  </tr>
</table>
<span class="moref" onclick="morefriend()">加载我的好友</span>
<div id="interpolation"></div>
<script type="text/template" charset="utf-8" id='template_1'>
    {{ for(var i=0;i<it.length;i++){ }}
        <tr>
            <td>{{=it[i].name }}</td>
            <td>{{=(it[i].mobile).substring(0,3)+'****'+(it[i].mobile).substring(7,4)}}</td>
            <td>{{=it[i].score }}</td>
            <td>{{=it[i].time }}</td>
        </tr>
    {{ } }}
</script>
<script type="text/javascript">
    $(function(){
        morefriend();
    });
    var page_f=1;
    function morefriend(){
        var url="mydata.php";
        var flag='friend';
        $.post(url,{flag:flag,page_f:page_f},function(res){
            res=$.parseJSON(res);
            if(res.status>0){
                var dataInter=res.list;
                var interText = doT.template($("#template_1").html());
                $(".moreff").append(interText(dataInter));
                page_f++;
            }else{
                $(".moref").text("没有更多");
            }
        });
    }
</script>
</body>
</html>

dot.js异步加载数据

猜你喜欢