背景介绍
为了使用户在 PC 端更加便捷的获取天气预报信息,许多生活服务类网站均添加了天气预报功能,本次试题将实现一周天气的查询与显示。
考试需求
-
补全
js/index.js
中 JavaScript 空缺代码,通过 jQueryajax
请求杭州一周天气预报数据。API 接口地址 一周天气预报 js/weather.json
接口响应示例
- 将请求到的一周天气预报数据绑定到 HTML 中,最终效果图如下所示。
原html代码
<!DOCTYPE html>
<html>
<head>
<title>天气查询</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav class="navbar">
<hearder class="title">天气查询</hearder>
<div class="dialog">
<div class="input-dialog">
<input type="text" name="input-weather" id="input-weather" placeholder="杭州">
</div>
</div>
</nav>
<article class="mainbody">
<section class="week-weather">
<div class="item" id="Monday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Tuesday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Wednesday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Thursday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Friday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Saturday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="item" id="Sunday">
<img src="">
<div class="item-mess">
<div></div>
<div></div>
<div></div>
<div>
<span></span>
<span></span>
</div>
</div>
</div>
</section>
</article>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
补充代码:
function getweather() {
//TODO:请补充代码
$.ajax({
url: './js/weather.json',
type: "GET",
dataType: "json",
success: function (res) {
console.log(res);
var data = res.result;
console.log(data);
var str = '';
$.each(data, function (i, obj) {
console.log(i);
console.log(obj);
str += '<div class="item">';
str += '<img src="' + obj.weather_icon + '"/>'
str += '<div class="item-mess">'
str += '<div>' + obj.weather + '</div>'
str += '<div>' + obj.temperature + '</div>'
str += '<div>' + obj.winp + '</div>'
str += '<div>'
str += '<span>' + obj.days + '</span>'
str += '<span>' + obj.week + '</span>'
str += '</div>'
str += '</div>'
str += '</div>'
});
$('.week-weather').append(str);
}
})
}
getweather();
先定义str为空,再运用'str=str+...'相当于拼接字符串。
发现用模板字符串更加简单
function getweather() {
//TODO:请补充代码
$.ajax({
url:'js/weather.json',
type:'GET',
dataType:'json',
success:function(res){
var data =res.result;
$.each(data,function(i,obj){
console.log(obj);
var str=` <div class="item" >
<img src="${obj.weather_icon}">
<div class="item-mess">
<div>${obj.weather}</div>
<div>${obj.temperature}</div>
<div>${obj.winp}</div>
<div>
<span>${obj.days}</span>
<span>${obj.week}</span>
</div>
</div>
</div> `
$('.week-weather').append(str)
})
}
})
}
getweather();
主要运用到了jquery的ajax,以及jquery对元素的操作,遍历元素。这个方法之前学过,但是都忘记了,需要进一步加深巩固。