使用开放天气 api AJAX 和 JS 构建 5 天预报

Question

我正在尝试使用开放天气构建 5 天预报 API。我基于网站使用的参数不起作用，returns 未定义。另外，有没有办法让我从第 1 天、第 2 天等开始获得主要温度。请帮忙

这是我的代码：

$.ajax({
  url: 'http://api.openweathermap.org/data/2.5/forecast', //API Call
  dataType: 'json',
  type: 'GET',
  data: {
    q: city,
    appid: key,
    units: 'metric',
    cnt: '10'
  },
  success: function(data) {
    var wf = '';
    $.each(data, function(index, val) {
      wf += '<p><b>' + data.city.name + '</b><img src=http://openweathermap.org/img/w/' + data.list[0].weather.icon + '.png></p>' + data.list[0].main.temp + '&deg;C' + ' | ' + data.list[0].weather.main + ", " + data.list[0].weather.description
    });
    $("#showWeatherForcast").html(wf);
  }
});

Answer 1

在 url 中尝试此操作并删除数据属性

'http://api.openweathermap.org/data/2.5/forecast?appid='+key+'&q='+city+'&count=10'

没有 api 键我无法测试，但文档几乎告诉你该怎么做 http://openweathermap.org/forecast5

Answer 2

您当前的代码相距不远。我建议您在 success 函数中使用 console.log(data) 来查看测试时弹出的内容。它将帮助您理解返回的数据结构。

如果您现在查看浏览器控制台，您可能会看到一些警告。我建议您对主要 API 调用和图像 URL 使用 https 而不是 http URL，以避免其中的一些，包括混合内容警告。

以下代码改编自您的代码，并在 city 中的 data.list 中每个 val 显示温度、描述和图标。请注意，此处的 $.each 循环遍历数组 data.list 中每个 val (0-9) 的属性以访问您需要的数据。您当前的代码每次都尝试访问 data.list[0][some property] 的 val，返回 undefined.

var key = "YOUR KEY";
var city = "YOUR CITY"; // My test case was "London"
var url = "https://api.openweathermap.org/data/2.5/forecast";

$.ajax({
  url: url, //API Call
  dataType: "json",
  type: "GET",
  data: {
    q: city,
    appid: key,
    units: "metric",
    cnt: "10"
  },
  success: function(data) {
    console.log('Received data:', data) // For testing
    var wf = "";
    wf += "<h2>" + data.city.name + "</h2>"; // City (displays once)
    $.each(data.list, function(index, val) {
      wf += "<p>" // Opening paragraph tag
      wf += "<b>Day " + index + "</b>: " // Day
      wf += val.main.temp + "&degC" // Temperature
      wf += "<span> | " + val.weather[0].description + "</span>"; // Description
      wf += "<img src='https://openweathermap.org/img/w/" + val.weather[0].icon + ".png'>" // Icon
      wf += "</p>" // Closing paragraph tag
    });
    $("#showWeatherForcast").html(wf);
  }
});

使用开放天气 api AJAX 和 JS 构建 5 天预报

building a 5 day forecast using open weather api AJAX and JS

javascript

api

ajax

openweathermap