使用模版引擎填充重复dom元素
Posted 梦见一只电子羊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用模版引擎填充重复dom元素相关的知识，希望对你有一定的参考价值。
引入arttemplate,定义newajax发送跨域请求获得数据,将获得的数据用定义的格式渲染
<!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>
<!--引入模版引擎arttemplate-->
<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>
</ul>
<!--可写成插件,ajax方法-->
<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>
<script>
newAjax({
dataType:"jsonp",
url:"http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=20dcd5d3bbae617403e1cd5118a93b36",
success:function(json){
var json = json.result.future;
var data = {content:json};
var html = template("report",data);
// template对象是ArtTemplate在JS中用于操作模板的对象，第一个参数是模板的id,用于指定此次操作的是哪个模 //板，第二个就是要放入模板的参数
$("ul").append(html);
}
});
</script>
</body>
</html>
以上是关于使用模版引擎填充重复dom元素的主要内容，如果未能解决你的问题，请参考以下文章