2021-10-31【数据交互】天气预报查询

最新推荐文章于 2024-09-16 08:47:17 发布

暴走邵九璃

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量221

点赞数

文章标签：交互 javascript json

本文链接：https://blog.csdn.net/shaojiuli/article/details/121062265

版权

该代码段实现了一个JavaScript函数，通过Ajax从`js/weather.json`获取天气数据，并将一周内每天的天气情况（包括天气图标、天气状况、温度、风向等）填充到页面相应元素中。该函数适用于前端数据展示，利用jQuery库进行异步请求和DOM操作。

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


 function getweather() {
     //TODO：请补充代码
     $.ajax({
        type: "get",
        url: "js/weather.json",
        data: {},
        dataType: "json",
        success: function (data) {
            console.log(data.result)
            $("#Monday img").attr('src',data.result[0].weather_icon);
            $("#Monday .item-mess div:nth-child(1)").prepend(data.result[0].weather);
            $("#Monday .item-mess div:nth-child(2)").prepend(data.result[0].temperature);
            $("#Monday .item-mess div:nth-child(3)").prepend(data.result[0].winp);
            $("#Monday .item-mess div span:nth-child(1)").prepend(data.result[0].days);
            $("#Monday .item-mess div span:nth-child(2)").prepend(data.result[0].week);

            $("#Tuesday img").attr('src',data.result[1].weather_icon);
            $("#Tuesday .item-mess div:nth-child(1)").prepend(data.result[1].weather);
            $("#Tuesday .item-mess div:nth-child(2)").prepend(data.result[1].temperature);
            $("#Tuesday .item-mess div:nth-child(3)").prepend(data.result[1].winp);
            $("#Tuesday .item-mess div span:nth-child(1)").prepend(data.result[1].days);
            $("#Tuesday .item-mess div span:nth-child(2)").prepend(data.result[1].week);

            $("#Wednesday img").attr('src',data.result[2].weather_icon);
            $("#Wednesday .item-mess div:nth-child(1)").prepend(data.result[2].weather);
            $("#Wednesday .item-mess div:nth-child(2)").prepend(data.result[2].temperature);
            $("#Wednesday .item-mess div:nth-child(3)").prepend(data.result[2].winp);
            $("#Wednesday .item-mess div span:nth-child(1)").prepend(data.result[2].days);
            $("#Wednesday .item-mess div span:nth-child(2)").prepend(data.result[2].week);

            $("#Thursday img").attr('src',data.result[3].weather_icon);
            $("#Thursday .item-mess div:nth-child(1)").prepend(data.result[3].weather);
            $("#Thursday .item-mess div:nth-child(2)").prepend(data.result[3].temperature);
            $("#Thursday .item-mess div:nth-child(3)").prepend(data.result[3].winp);
            $("#Thursday .item-mess div span:nth-child(1)").prepend(data.result[3].days);
            $("#Thursday .item-mess div span:nth-child(2)").prepend(data.result[3].week);

            $("#Friday img").attr('src',data.result[4].weather_icon);
            $("#Friday .item-mess div:nth-child(1)").prepend(data.result[4].weather);
            $("#Friday .item-mess div:nth-child(2)").prepend(data.result[4].temperature);
            $("#Friday .item-mess div:nth-child(3)").prepend(data.result[4].winp);
            $("#Friday .item-mess div span:nth-child(1)").prepend(data.result[4].days);
            $("#Friday .item-mess div span:nth-child(2)").prepend(data.result[4].week);

            $("#Saturday img").attr('src',data.result[5].weather_icon);
            $("#Saturday .item-mess div:nth-child(1)").prepend(data.result[5].weather);
            $("#Saturday .item-mess div:nth-child(2)").prepend(data.result[5].temperature);
            $("#Saturday .item-mess div:nth-child(3)").prepend(data.result[5].winp);
            $("#Saturday .item-mess div span:nth-child(1)").prepend(data.result[5].days);
            $("#Saturday .item-mess div span:nth-child(2)").prepend(data.result[5].week);

            $("#Sunday img").attr('src',data.result[6].weather_icon);
            $("#Sunday .item-mess div:nth-child(1)").prepend(data.result[6].weather);
            $("#Sunday .item-mess div:nth-child(2)").prepend(data.result[6].temperature);
            $("#Sunday .item-mess div:nth-child(3)").prepend(data.result[6].winp);
            $("#Sunday .item-mess div span:nth-child(1)").prepend(data.result[6].days);
            $("#Sunday .item-mess div span:nth-child(2)").prepend(data.result[6].week);
        }
    })

}

getweather();

我是笨比