共计 1761 个字符，预计需要花费 5 分钟才能阅读完成。
废话不多说，直接上代码。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title> 天气 </title>
</head>
<body>
<div id="app">
<h2> 最新天气实况 </h2>
<p> 城市：<span></span></p>
<p> 日期：<span></span></p>
<p> 天气：<span></span></p>
<p> 当前气温：<span></span></p>
<p> 风向：<span></span></p>
<p> 最高气温：<span></span></p>
<p> 最低气温：<span></span></p>
<p> 温馨提醒：<span></span></p>
<h2> 未来 7 天天气预报 </h2>
<table border="1" id="detail">
<thead>
<tr>
<th> 日期 </th>
<th> 天气 </th>
<th> 当前温度 </th>
<th> 最高气温 </th>
<th> 最低气温 </th>
<th> 风向 </th>
<th> 风力 </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: 'https://www.tianqiapi.com/api/?version=v1',
type: 'get',
data: {city: "北京"},
dataType: 'json',
error: function(resp, status) {console.log('请求失败：', status, resp);
},
success: function(resp, status) {
var wCity = resp.city;
var wDate = resp.data[0].date;
var wWea = resp.data[0].wea;
var wTem = resp.data[0].tem;
var wWin = resp.data[0].win[0];
var wTemMax = resp.data[0].tem1;
var wTemMin = resp.data[0].tem2;
var wAirTips = resp.data[0].air_tips;
$('#app p:nth-child(2) span').html(wCity);
$('#app p:nth-child(3) span').html(wDate);
$('#app p:nth-child(4) span').html(wWea);
$('#app p:nth-child(5) span').html(wTem);
$('#app p:nth-child(6) span').html(wWin);
$('#app p:nth-child(7) span').html(wTemMax);
$('#app p:nth-child(8) span').html(wTemMin);
$('#app p:nth-child(9) span').html(wAirTips);
$("#detail tbody").empty();
for (var i = 0; i < 7; i++) {
var forword_day = "<tr><td>" +
resp.data[i].day + "</td><td>" +
resp.data[i].wea + "</td><td>" +
resp.data[i].tem + "</td><td>" +
resp.data[i].tem1 + "</td><td>" +
resp.data[i].tem2 + "</td><td>" +
resp.data[i].win[0] + "</td><td>" +
resp.data[i].win_speed + "</td>" +
"</tr>";
$("#detail tbody").append(forword_day);
}
}
})
})
</script>
</body>
</html> 效果大概是这样的
实习时又用到了 Ajax，巴拉巴拉写个例子出来。
要讲的话也没什么好讲的吧，挺简单的。
希望能对新手产生启发作用。
正文完
