<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
var city_value = $("#city").val();
$.ajax({
url: "https://api.asilu.com/weather/",
type:'GET',
dataType:'jsonp',
data:{
"city":city_value,
"key":"adfdb863ddb1101bb6b40c0700d6203b",
},
success: function(html){
alert(html.city);
alert(html.weather[0].weather);
var str = "";
str += "<tr align='center'>";
str += "<td>"+html.city+"</td>";
str += "<td>"+html.weather[0].date+"</td>";
str += "<td>"+html.weather[0].weather+"</td>";
str += "<td>"+html.weather[0].temp+"</td>";
str += "<td>"+html.weather[0].wind+"</td>";
str += "</tr>";
$("#res").html(str)
}
});
})
})
</script>
</head>
<body>
<h1>城市天气信息</h1>
<table border="1" class="city_weather" style="display: block;">
<tr>
<th>城市</th>
<th>日期</th>
<th>天气</th>
<th>温度</th>
<th>风力</th>
</tr>
<tbody id="res">
</tbody>
</table>
<input type="text" placeholder="请输入要查找的城市" id="city" />
<button id="btn">确定</button>
</body>
</html>
数据来自聚合科技网站，地址如下：
https://www.juhe.cn/docs/index/cid/1/page/2
申请key的步骤如下：
第一步：
第二步：输入框搜索天气
第三步：点击天气预报的申请数据
第四步：将页面下拉至最低端，勾选并点击立即申请
第五步：就可以查看key值了
