引入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. vs 点击就设置项目为默认启动项

    装好系统没注意 做项目的时候解决方案比较多 发现点击哪个项目哪个项目就成了默认启动项目 这个开始没觉出来 最后发现挺烦人的 想想难道是我装vs装的么 我于是卸载了全新安装了 还是一个吊样 无意间试了下 ...

  2. winform datetimepacker 开始日期 结束日期 分类： WinForm 2014-07-15 19:14 124人阅读 评论(0) 收藏

    dtpStart;//开始日期 dtpEnd;//结束日期 1:开始日期小于结束日期 加载dtpEnd的ValueChanged事件即可. //开始日期小于结束日期         private v ...

  3. DB2 数据库绑定用户授权命令

    1.1  数据库绑定用户授权命令 db2 connect to opca db2 grant dbadm,createtab,bindadd,connect,create_not_fenced_rou ...

  4. Java堆栈详解 .

    1. Java中堆栈(stack)和堆(heap) (1)内存分配的策略 按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据 ...

  5. mysql 源码编绎修改 FLAGS,调试MYSQL

    http://dev.mysql.com/doc/refman/5.7/en/source-configuration-options.html#option_cmake_cmake_c_flags ...

  6. 省市联级菜单--js+html

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  7. CentOS LNMP安装phpMyAdmin

    假设: 已经配置好LNMP环境,并且Nginx的网页目录在/usr/local/nginx/html 1.下载phpMyAdmin wget https://files.phpmyadmin.net/ ...

  8. C# 内存管理优化畅想----前言

    C#语法简洁.优雅,类库丰富,是我最喜爱的计算机语言,没有“之一”.但是,经过深入学习后发现,C#的内存管理,也就是通常所说的垃圾回收(GC)机制,虽然跟其他支持GC的语言相比,已经很优秀了,但与手动 ...

  9. CSS3伪类nth-child结合transiton动画实现文字若影若现

    css3伪类nth-child结合transiton动画实现文字若影若现收先创建一个div盒子,然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I ...

  10. HTML5－36d嗨起^_^

    如果一个前端不会写css那必然会被贻笑大方,利用html5新增的一些c3属性可以做许许多多炫酷的效果. 大家先看我写的一个小demo: http://zpf92.github.io/build/ 这个 ...