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

第十三届蓝桥杯（Web 应用开发）线上模拟赛参考答案全集

考试需求

• 补全 js/index.js 中 JavaScript 空缺代码，通过 jQuery ajax 请求杭州一周天气预报数据。
• API 接口地址
  一周天气预报 js/weather.json：

{
  "success": "1",
  "result": [
    {
      "weaid": "94",
      "days": "2021-08-17",
      "week": "星期二",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "30℃/24℃",
      "humidity": "0%/0%",
      "weather": "小雨转多云",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-7.gif",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-1.gif",
      "wind": "东北风转无持续风向",
      "winp": "3-4级转3-4级",
      "temp_high": "30",
      "temp_low": "24",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "8",
      "weatid1": "2",
      "windid": "1",
      "winpid": "1",
      "weather_iconid": "7",
      "weather_iconid1": "1"
    },
    {
      "weaid": "94",
      "days": "2021-08-18",
      "week": "星期三",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "30℃/23℃",
      "humidity": "0%/0%",
      "weather": "多云",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-d1.gif",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-1.gif",
      "wind": "东风转无持续风向",
      "winp": "3-4级转3-4级",
      "temp_high": "30",
      "temp_low": "23",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "2",
      "weatid1": "2",
      "windid": "2",
      "winpid": "1",
      "weather_iconid": "1",
      "weather_iconid1": "1"
    },
    {
      "weaid": "94",
      "days": "2021-08-19",
      "week": "星期四",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "30℃/23℃",
      "humidity": "0%/0%",
      "weather": "多云",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-d1.gif ",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-1.gif ",
      "wind": "东风转无持续风向",
      "winp": "3-4级转3-4级",
      "temp_high": "30",
      "temp_low": "23",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "2",
      "weatid1": "2",
      "windid": "2",
      "winpid": "1",
      "weather_iconid": "1",
      "weather_iconid1": "1"
    },
    {
      "weaid": "94",
      "days": "2021-08-20",
      "week": "星期五",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "33℃/25℃",
      "humidity": "0%/0%",
      "weather": "阴转小雨",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-d2.gif ",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-n7.gif",
      "wind": "无持续风向",
      "winp": "小于3级",
      "temp_high": "33",
      "temp_low": "25",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "3",
      "weatid1": "8",
      "windid": "0",
      "winpid": "0",
      "weather_iconid": "2",
      "weather_iconid1": "7"
    },
    {
      "weaid": "94",
      "days": "2021-08-21",
      "week": "星期六",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "30℃/25℃",
      "humidity": "0%/0%",
      "weather": "小到中雨转多云",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-d2.gif ",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-1.gif",
      "wind": "东南风转无持续风向",
      "winp": "3-4级转3-4级",
      "temp_high": "30",
      "temp_low": "25",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "22",
      "weatid1": "2",
      "windid": "3",
      "winpid": "1",
      "weather_iconid": "21",
      "weather_iconid1": "1"
    },
    {
      "weaid": "94",
      "days": "2021-08-22",
      "week": "星期日",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "33℃/26℃",
      "humidity": "0%/0%",
      "weather": "小雨",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-7.gif",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-n7.gif",
      "wind": "南风转无持续风向",
      "winp": "3-4级转3-4级",
      "temp_high": "33",
      "temp_low": "26",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "8",
      "weatid1": "8",
      "windid": "4",
      "winpid": "1",
      "weather_iconid": "7",
      "weather_iconid1": "7"
    },
    {
      "weaid": "94",
      "days": "2021-08-23",
      "week": "星期一",
      "cityno": "hangzhou",
      "citynm": "杭州",
      "cityid": "101210101",
      "temperature": "33℃/27℃",
      "humidity": "0%/0%",
      "weather": "小雨转阴",
      "weather_icon": "https://labfile.oss.aliyuncs.com/courses/4450/weather-7.gif",
      "weather_icon1": "https://labfile.oss.aliyuncs.com/courses/4450/weather-d2.gif ",
      "wind": "西南风",
      "winp": "3-4级",
      "temp_high": "33",
      "temp_low": "27",
      "humi_high": "0",
      "humi_low": "0",
      "weatid": "8",
      "weatid1": "3",
      "windid": "5",
      "winpid": "1",
      "weather_iconid": "7",
      "weather_iconid1": "2"
    }
  ]
}

• 接口响应示例
  将请求到的一周天气预报数据绑定到 HTML 中，最终效果图如下所示。
  图片描述
  

解决办法

在./js/index.js利用Jquery的ajax请求数据并对标签的数据进行修改绑定

参考代码

js/index.html

 function getweather() {
    //TODO：请补充代码
    
    $.ajax('./js/weather.json').then(res => {
        let dataArr = res.result;
        for (let index = 0; index < dataArr.length; index++) {
             // 遍历json数组
            const element = dataArr[index];
            $("body > article > section > div:nth-child(" +(index+1) + ")" + "> img").attr('src', element.weather_icon);
            $("body > article > section > div:nth-child(" +(index+1) + ")" + "> div > div:nth-child(1)").text(element.weather);
            $("body > article > section > div:nth-child(" +(index+1) + ")" + "> div > div:nth-child(2)").text(element.temperature);
            $("body > article > section > div:nth-child(" +(index+1) + ")" + "> div > div:nth-child(3)").text(element.winp);
            $("body > article > section > div:nth-child(" +(index+1) + ")" + "> div > div:nth-child(4) > span:nth-child(1)").text(element.days);
            $("body > article > section > div:nth-child(" +(index+1) + ")" + "> div > div:nth-child(4) > span:nth-child(2)").text(element.week);
        }
    });
    
}
getweather();