<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天氣預報</title>
<style>
table {
margin-top: 20px;
width: 600px;
border-collapse: collapse;
}
td,th{
height: 50px;
text-align: center;
border: 1px solid #CCC;
}
</style>
</head>
<body>
<input type="text" id="city"/> <a href="javascript:;" id="search">天氣查詢</a>
<table>
<thead>
<tr>
<th>日期</th>
<th>白天</th>
<th>晚上</th>
<th>溫度</th>
<th>天氣</th>
<th>風力</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/template" id="template">
<%for(var i = 0 ; i < model.length ; i++){%>
<tr>
<td><%=model[i].date%></td>
<td><img src="<%=model[i].dayPictureUrl%>" alt=""/></td>
<td><img src="<%=model[i].nightPictureUrl%>" alt=""/></td>
<td><%=model[i].temperature%></td>
<td><%=model[i].weather%></td>
<td><%=model[i].wind%></td>
</tr>
<%};%>
</script>
<script src="./js/jquery.min.js"></script>
<script src="./js/template-native.js"></script>
<script>
$(function(){
/*
* 1.輸入城市名
* 2，點擊的時候發送請求
* 3.響應成功渲染頁面
* */
$('#search').on('click',function(){
var city = $('#city').val()||'北京';
$.ajax({
type:'get',
url:'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',
data:{location:city},
dataType:'jsonp',
success:function(data){
var weather_data = data.results[0].weather_data;
var html = template('template',{model:weather_data});
$('tbody').html(html);
}
});
});
});
</script>
</body>
</html>
