<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value='去百度 获取天气预报'>
<table id='weather'></table>
</body>
</html>
<script type="text/javascript" src='../js/template-native.js'></script>
<script type="text/template" id='template'>
<%for(var i=0;i<weather_data.length;i++) {%>
<tr>
<td><%=weather_data[i].date%></td>
<td><img src="<%=weather_data[i].dayPictureUrl%>" alt=""></td>
<td><img src="<%=weather_data[i].nightPictureUrl%>" alt=""></td>
<td><%=weather_data[i].temperature%></td>
<td><%=weather_data[i].weather%></td>
<td><%=weather_data[i].wind%></td>
</tr>
<% } %>
</script>
<script type="text/javascript" src='../js/jquery.min.js'></script>
<script type="text/javascript">
$("input").click(function () {
$.ajax({
url:"http://api.map.baidu.com/telematics/v3/weather?location=上海&output=json&ak=tq0Kt0NFYheTCj5mszast0drkIqqVTNn",
dataType:'jsonP',
success:function(data){
// 读取对象
var weatherResults = data.results[0];
// 读取模板
var str = template('template',weatherResults);
console.log(str);
// 添加到界面上
$("#weather").append(str);
}
})
})
</script>
演示效果:
用到百度开发者工具:http://lbsyun.baidu.com/index.php?title=car/api/weather