使用模版引擎填充重複dom元素

時間 2019-11-17

標籤使用模版引擎填充重複 dom 元素欄目 HTML 简体版

原文原文鏈接

引入arttemplate,定義newajax發送跨域請求得到數據,將得到的數據用定義的格式渲染javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<script src="js/template-native.js"></script>

<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 700px;
margin:100px auto;
}
ul li{
float: left;
width: 100px;
background:skyblue;
}
</style>
</head>
<body>
<ul>html

</ul>


<script type="text/javascript">
function newAjax(obj){
var type = obj.type ||"get";
var dataType = obj.dataType ||"json";
var url = obj.url;
var data = obj.data ||{};
var success = obj.success;
//咱們須要拼接data成爲一個特定格式的字符串
//{ page:1,pageSize:10} =>page=1&pageSize=10
var dataStr = "";//用dataStr來記錄字符串拼接的結果
for(var key in data){
dataStr+=key+"="+data[key]+"&"
}
dataStr = dataStr.slice(0,-1);//刪除最後一位
if(dataType=="jsonp"){
//須要有個不會重名的函數，而且把函數名告訴後臺，後臺通常用callback來接受這個函數名
var cbname = "newAjax"+(new Date()).getTime()+Math.random().toString().slice(2);
//定義這個全局函數
window[cbname]=function(json){
success(json);
newScript.parentNode.removeChild(newScript);
};
//把這個函數名告訴後臺，同時發送跨域請求
var newScript = document.createElement("script");
if(dataStr==""){
newScript.src = url+"&callback="+cbname;
}else{
newScript.src = url+"?"+dataStr+"&callback="+cbname;
}
document.body.appendChild(newScript);
}else{
var xhr = new XMLHttpRequest();
if(type == "get"){
xhr.open("get",url+"?"+dataStr);
xhr.send(null);
}else if(type=="post"){
xhr.open("post",url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(dataStr);
}
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
var mydata = xhr.responseText;
mydata = JSON.parse(mydata);
success(mydata);
}
}
}
}
</script>
<script type="text/template" id="report">
<%for(var i=0;i<content.length;i++){%>
<li>
<p><%=content[i].date%></p>
<p><%=content[i].temperature%></p>
<p><%=content[i].weather%></p>
<p><%=content[i].wind%></p>
</li>
<%}%>
</script>java