使用art-template渲染json数据
于高雅
art-template特性
- 性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）
- 支持运行时调试，可精确定位异常模板所在语句（演示）
- 对 NodeJS Express 友好支持
- 安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）
- 支持include语句
- 可在浏览器端实现按路径加载模板（详情）
- 支持预编译，可将模板转换成为非常精简的 js 文件
- 模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选
- 支持所有流行的浏览器
案例使用原生语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>天气预报-hao360接口</title>
<link rel="stylesheet" href="css/weather.css">
<script src="js/jquery-3.3.1.js"></script>
<!--
使用前段模板框架，生成html
art-template
1.引入art-template的包
2.根据art-template的语法，编写模板
3.使用模板
-->
<script src="js/template-native-debug.js"></script>
<!--
创建模板
1.模板必须定义到一对<script>标签内
-->
<script id="wtTemplate" type="text/html">
<li>
<h2><%= date %></h2>
<div class="day">
<h3>白天天气</h3>
<% for(var i=1;i<info.day.length;i++){ %>
<p><%= info.day[i] %></p>
<% } %>
</div>
<div class="night">
<h3>晚上天气</h3>
<% for(var i=1;i<info.night.length;i++){ %>
<p><%= info.night[i] %></p>
<% } %>
</div>
</li>
</script>
<script type="text/javascript">
//声明回调函数
function callback(data) {
//1.拆解data数据
$('#wtInfo').html('');//清空已有的天气数据
var wt = data.weather;
//2.循环生成5个li标签，并且把数据渲染到li标签里
$.each(wt, function (i, e) {
var tag = template('wtTemplate', e);
//3.把生成的li标签插入到ul里
$('#wtInfo').append(tag);
});
}
$(function () {
//注册按钮btn点击事件
$('#btn').on('click', function () {
//1.获取选中的城市ID
var cityCode = $('#selCity option:selected').val();
//2.拼接出请求URL
var url = 'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code=' + cityCode;
//3.动态的在页面合适位置创建一个<script>标签，让它使用jsonp的原理，发出对后端数据接口的请求
var tag = '<script src=' + url + '>';
$('body').append(tag);
});
})
</script>
</head>
<body>
<div class="wt_container">
<div class="city">
<select id="selCity">
<option value="101180201">大安阳</option>
<option value="101010100">北京</option>
<option value="101180101">郑州</option>
<option value="101250101">长沙</option>
<option value="101050101">哈尔滨</option>
<option value="101130101">乌鲁木齐</option>
<option value="101280101">广州</option>
</select>
<button id="btn">查看天气</button>
</div>
<div class="weather">
<ul id="wtInfo">
</ul>
</div>
</div>
</body>
</html>
样式
*{
margin: 0;
padding: 0;
}
.wt_container{
width: 800px;
height: 360px;
margin: 100px auto;
}
.wt_container .weather{
width: 100%;
height: 100%;
}
.wt_container .city{
text-align: center;
padding: 10px;
font-family: "microsoft yahei";
}
.city button{
padding: 10px 20px;
background-color: #0e7fdf;
border-radius: 4px;
outline: 0;
color: #fff;
font-weight: bold;
font-size: 14px;
}
.city select{
width: 200px;
padding: 10px 20px;
border-radius: 4px;
font-size: 14px;
}
.weather ul{
list-style: none;
width: 100%;
}
.weather li{
width: 140px;
height: 100%;
padding: 8px;
margin: 0 1px;
border: 1px solid #fff;
float: left;
font-size: 14px;
color: #222;
text-align: left;
background-color: #50b2fb;
}
.weather li:hover{
border-color: #333;
}
.weather li h2{
text-align: center;
font-size: 16px;
padding: 10px 0;
border-bottom: 1px solid #666;
}
.weather li div{
padding: 0px 10px;
}
.weather li h3{
font-size: 16px;
padding: 10px 0;
}
.weather li p{
font-size: 14px;
padding: 2px;
}
类似资料：