蓝桥杯web:7.【数据交互】天气预报查询

Rainbow一定行

已于 2022-04-05 17:31:01 修改

阅读量676

点赞数 2

分类专栏：蓝桥杯web模拟题1 文章标签：蓝桥杯 javascript postman

于 2022-02-03 23:02:05 首次发布

本文链接：https://blog.csdn.net/weixin_51167834/article/details/122779798

版权

蓝桥杯web模拟题1 专栏收录该内容

10 篇文章 10 订阅

订阅专栏

背景介绍

为了使用户在 PC 端更加便捷的获取天气预报信息，许多生活服务类网站均添加了天气预报功能，本次试题将实现一周天气的查询与显示。

考试需求

补全 js/index.js 中 JavaScript 空缺代码，通过 jQuery ajax 请求杭州一周天气预报数据。

API 接口地址
一周天气预报 js/weather.json

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对元素的操作，遍历元素。这个方法之前学过，但是都忘记了，需要进一步加深巩固。

Rainbow一定行

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
蓝桥杯web:7.【数据交互】天气预报查询

function getweather() { //TODO：请补充代码 $.ajax({ url: './js/weather.json', type: "GET", dataType: "json", success: function (res) { console.log(res); var data = res..
复制链接

扫一扫

专栏目录