开放天气API

Question

所以，我正在为不同的社区制作一堆网页，在每个网页上我都想要一个可以自定义的小天气框，只包含城镇名称、当前温度和当前天气状况。我希望能够完全按照我想要的方式来设计它。我发现这个名为Open Weather Map 的网站似乎完全符合我的要求。问题是我不知道如何使用 JSON。这可能很容易，但我似乎已经迷失在我尝试过的任何在线教程中。

这是页面 URL 的示例，用于加载一些 JSON。http://api.openweathermap.org/data/2.5/weather?q=英国伦敦

我可以将它包含在我的文件中并动态更改城市和国家/地区代码以获得我想要的城市。但是我如何将它加载到我的天气箱中？假设这就是我所拥有的：

<div class="weatherbox">

  <strong class="city>{CITY NAME HERE}</strong>
  <span class="temperature">{X} °C</span>
  <p class="weatherdescription>{WEATHER DESCRIPTION HERE}</p>

</div>

那么如何从 JSON 访问数据呢？我希望它尽可能简单地完成。我是否包含这样的文件以访问对象，还是更复杂？

<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script>

Answer 1

从你的代码行：

<script type="javascript" src="http://api.openweathermap.org/data/2.5/weather?q=London,uk"></script>

这是不正确的，api 正在返回 JSON，它不是 javascript 文件，因此您不能以这种方式访问​​它。请注意，他们的 API 似乎将城市和国家/地区作为 URL 参数的一部分，因此您需要插入相应的城市/国家/地区。

对于您的具体问题，您可以执行以下操作：

var jsonData;

$(document).ready(function ()
{
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=London,uk', function(data) {
        jsonData = data;
        $('.city').text(jsonData.name);
        // etc
    });
});

请参阅http://jsfiddle.net/jsxm7j3n/1/以了解它的实际效果。

请注意，为了理解 JSON，您可以通过 JSON 解析器运行它，例如http://json.parser.online.fr/ 上的解析器- 这将让您更好地了解您收到的内容的组成返回，以及如何解析它。

双重注意：忘记提及此解决方案使用 JQuery - 我相信有纯粹的 javascript 方法可以实现它，但它会更加冗长并且（在我看来）更难理解。