【数据交互】天气预报查询第十三届蓝桥杯（Web 应用开发）线上模拟赛

最新推荐文章于 2023-11-05 10:55:33 发布

Pulseum

最新推荐文章于 2023-11-05 10:55:33 发布

阅读量916

点赞数 1

分类专栏：第十三届蓝桥杯Web模拟赛文章标签：前端

本文链接：https://blog.csdn.net/qq_53472371/article/details/121740758

版权

本文介绍了第十三届蓝桥杯（Web应用开发）线上模拟赛中关于数据交互的天气预报查询任务。通过分析考试需求，提供了解题思路和相关代码实现，包括`index.js`和`index.html`的内容，聚焦前端技术在数据获取和展示的应用。

摘要由CSDN通过智能技术生成

【数据交互】天气预报查询

考试需求

001
002

解答：

index.js:

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

            // 了解each方法！！！

            // 注意：输出的i与obj分别为下标与单个对象
            $.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