template-native.js帮后台请求过来的数据渲染在页面上
话不多说，直接上代码。感觉好笨重 ，用惯了vue，再来用这个感觉天塌下来了
自己网上下载一个 template-native.js 其他代码直接复制到编辑器即可运行
<html>
<head>
<title>template-native模板渲染</title>
<meta charset="UTF-8" />
<script src="js/template-native.js" type="text/javascript" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#area ul li {
width: 100%;
height: 75px;
background: #1715151a;
padding: 10px 10px;
margin: 5px;
position: relative;
overflow: hidden;
}
#area ul li .imgs {
width: 72px;
height: 72px;
position: absolute;
top: 3px;
left: 5px;
border-radius: 100%;
}
#area ul li .imgs img {
width: 100%;
height: 100%;
border-radius: 100%;
}
#area ul li .text {
width: 100%;
height: 20px;
/* background: darkcyan; */
position: absolute;
top: 16px;
left: 87px }
#area ul li .info {
width: 100%;
height: 20px;
/* background: darkcyan; */
position: absolute;
top: 50px;
left: 87px }
</style>
<body>
<div id="area"></div>
<!--用于存放模版-->
<script id="template" type="text/html">
<div>
<ul>
<% for(i=0;i<list.length;++i) {%>
<li>
<div class="imgs">
<img src=<%=list[i].profile_image%> alt="" />
</div>
<div class="text">
标题：
<%=list[i].name%>
</div>
<div class="info">
内容:
<%=list[i].text%>
</div>
<%}%>
</li>
</ul>
</div>
</script>
<!--用于渲染模版-->
<script>
$.ajax({
url: 'https://www.apiopen.top/satinApi?type=1&page=1',
type: 'post',
cache: false,
dataType: 'json',
success: function(data) {
//免费接口拿到的数据
console.log(JSON.stringify(data));
//帮拿到的数据存在一个变量中
var arr = {
list: data.data//至于这里为什么是data.data自己访问一下这个接口看看数据格式即可
}
var html = template('template', arr);//arr就是上两行代码创建的
document.getElementById('area').innerHTML = html//渲染到哪个dom中
}
});
</script>
</body>
</html>例子展示
4608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
