引入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. MenuDrawer的使用

    ---恢复内容开始--- MenuDrawer框架是一个可以实现上下左右滑动的框架,在使用中可以在xml文件中配置也可以在java代码中实现效果的配置 可以以jar的形式或依赖的形式存在      用 ...

  2. Maven属性、profile和资源过滤

    Maven的六类属性 内置属性 主要有两个常用内置属性:${basedir}项目的根目录(包含pom.xml文件的目录),${version}项目版本 POM属性 用户可以使用该属性引用POM文件中对 ...

  3. 通过mybatis读取数据库数据并提供rest接口访问

    1 mysql 创建数据库脚本 -- phpMyAdmin SQL Dump -- version 4.2.11 -- http://www.phpmyadmin.net -- -- Host: lo ...

  4. hdoj 3157 Crazy Circuits 【有下界最小流】

    题目:hdoj 3157 Crazy Circuits 题意:如今要制造一个电路板.电路板上有 n 个电子元件,各个元件之间有单向的电流流向.然后有一个 + .电流进入, -- 电流汇入,然后推断能不 ...

  5. Linux Resin 安装

    1 Resin 下载 Resin 官方下载网址. 最新版下载 resin-4.0.36.tar.gz(免费版) resin 安装须要提前配置好jdk.配置jdk请看上面文章 2 Resin 安装 (1 ...

  6. hdoj Last non-zero Digit in N! 【数论】

    找规律! 求N!最后非0位的值.比方2是120的最后一个不是0的值. 输入N比較大,要大数保存. 注意到最后0的个数是与5的因数的个数相等.设f(n)为n!的最后非0位. 那么f(n)=((n%5)! ...

  7. 计算机体系结构-内存调优IPC OOMK

    man ipc [root@server1 proc]# man ipcIPC(2)                     Linux Programmer’s Manual             ...

  8. 自定义控件（视图）2期笔记10：自定义视图之View事件分发机制（"瀑布流"的案例）

    1. Touch事件的传递:   图解Touch事件的传递,如下: 当我们点击子View 02内部的Button控件时候,我们就触发了Touch事件. • 这个Touch事件首先传递给了顶级父View ...

  9. Java基础知识强化12：Java中运用数组的四种排序方法

    1.使用JavaApi文档中的Arrays类中的sort()进行快速排序 首先我们直接看代码如下: package himi.text; import java.util.Arrays; public ...

  10. java中的类集框架

    1.什么是类集框架 1.是一组类和接口 2.位于java.util包当中 3.主要用于用户存储和管理对象 4.主要分为三大类——集合.列表和映射 2.类集框架图 虚线框的表示接口,实线框的表示实现类 ...