引入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元素的更多相关文章

  1. T4教程1 T4模版引擎之基础入门

    T4模版引擎之基础入门   额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看 ...

  2. 黄聪：VS2010开发T4模版引擎之基础入门

    原文:http://www.cnblogs.com/lzrabbit/archive/2012/07/15/2591085.html 额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又 ...

  3. T4模版引擎之基础入门

    额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看,可怜的娃啊... T4(T ...

  4. js模版引擎开发实战以及对eval函数的改进

    简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根 ...

  5. Java模版引擎：jsp、freemarker、velocity区别

    在java领域,表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术优点:1.功能强大,可以写java代码2.支持jsp标签(jsp tag)3.支持表达式 ...

  6. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  7. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  8. HTML DOM 元素对象

    HTML DOM 元素对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 : 文档本身就是一个文档对象 所有 HTML 元素都 ...

  9. JS模版引擎[20行代码实现模版引擎读后感]

    曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...

随机推荐

  1. weblogic下 微信公众平台获取token报错

    问题描述: 开发微信公众平台,本地tomcat可以正常获取token并发送模板消息,部署在weblogic后报错,异常信息如下: java.security.InvalidKeyException: ...

  2. c#基础语言编程-常用函数

    类型转换Convert Convert考虑数据意义的转换. Convert是一个加工.改造的过程.在使用Convert的转换过程中不会返回异常,当遇到类型转换的不知道的时候,用Convert找找. T ...

  3. NDK安装 eclipse 不出现NDK目录问题

    android adt自带eclipse无法设置ndk路径 具体情况是 我在mac上搭建android环境 到android sdk官网下载r23版本的adt时自带的eclipse没有设置ndk路径的 ...

  4. Struts2配置文件讲解

    解决在断网环境下,配置文件无提示的问题我们可以看到Struts.xml在断网的情况下,前面有一个叹号,这时,我们按alt+/ 没有提示,这是因为” http://struts.apache.org/d ...

  5. 如何解决 SogouIinput not enough space for thread data ？？ 虚拟内存

    问题:总是提示没有足够的空间读写数据 上图: 原因: 可能是虚拟内存设置了过大了[我不知道明白是不是也是这样,我出现这个问题就是因为我把虚拟内存设置成了4G,我的物理内存是2G的] 具体问题具体分析, ...

  6. 如何彻底删除SVN中的文件和文件夹(附恢复方法)

    在SVN中如果删除某个文件或文件夹也可以在历史记录中进行找回,有的时候需要彻底删除某些文件,即不希望通过历史记录进行恢复,需要在服务器上对SVN的数据进行重新整理 这里假设SVN项目的目录为 /dat ...

  7. java中for循环的6种写法

    有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考.   package ForLoop; import java.util.ArrayList; import java.util.Itera ...

  8. ZOJ 3898 - Stean 积分

    有一个陶罐,陶罐是由函数Y=2+cosX,截取x=Z1到x=Z2段后,形成的旋转体,陶罐只有底x=Z1,没有盖子. 问陶罐能乘多少的水(体积),以及它的表面积 体积还是比较好求的,直接用旋转体体积公式 ...

  9. HTML的Get方法URL传递中文参数，解决乱码问题

    本例中有使用JQuery. 资料参考:http://www.cnblogs.com/babycool/p/3169058.html 发送的HTML页面代码: <!DOCTYPE html> ...

  10. CSS Pseudo-Element Selectors伪对象选择符

    一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...