天气预报应用 | 每周天气更新

介绍

在这个项目中，你将学习如何创建一个天气预报应用程序，该应用程序可以显示特定地点的每周天气信息。该项目涉及从 API 获取天气数据、解析响应，并动态更新 HTML 元素以向用户呈现天气预报。

👀 预览

天气预报应用程序预览

🎯 任务

在这个项目中，你将学习：

如何使用 jQuery 的 AJAX 功能从 API 获取天气预报数据
如何将获取到的数据绑定到网页上相应的 HTML 元素
如何以用户友好的格式显示每周天气预报信息

🏆 成果

完成这个项目后，你将能够：

创建一个简单的天气预报应用程序，为用户提供每周天气信息
理解如何使用 AJAX 请求从 API 获取数据
展示使用 jQuery 操作 DOM 和更新 HTML 元素的能力

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此操作：

打开项目文件夹。目录结构如下：

├── images        ## 图像资源
├── js            ## js 文件和 json 文件的目录
├── index.html    ## 天气预报页面
├── style.css     ## css 文件

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

初始项目结构视图

获取天气预报数据

在这一步中，你将学习如何使用提供的 API 获取 W 镇的每周天气预报数据。

在代码编辑器中打开 js/index.js 文件。
找到负责获取天气预报数据的 getweather() 函数。
在 getweather() 函数内部，使用 jQuery 的 $.get() 方法向 js/weather.json API 端点发送 GET 请求。

// TODO
$.get("js/weather.json", function (data) {
  // 将天气预报数据绑定到 HTML 元素
  //...
});

API 的响应数据将作为 data 参数传递给回调函数。此数据包含每周天气预报信息。

将天气预报数据绑定到 HTML

在这一步中，你将学习如何把获取到的天气预报数据绑定到页面上相应的 HTML 元素。

在 $.get() 方法的回调函数内部，找到你要将数据绑定到 HTML 的代码位置。
使用 jQuery 选择必要的 HTML 元素，比如天气图标、天气描述、温度和风的信息。

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}