template-native.js幫後臺請求過來的資料渲染在頁面上
阿新 • • 發佈:2018-12-03
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>
例子展示