dot.js异步加载数据

75 阅读 0 评论 50 点赞

我是靠谱客的博主火星上荷花，最近开发中收集的这篇文章主要介绍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" οnclick="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>