露天天气API [英] Open weather API

问题描述

因此，我正在为不同的社区制作一堆网页，在每个网页上我都希望有一个我可以自定义的小天气框，只需输入城镇名称，当前温度和当前天气状况即可.我希望能够完全按照自己的风格进行样式设置.我发现这个名为打开天气地图的网站似乎完全符合我的要求.问题是我不知道如何使用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>

从代码行中

解决方案

:

<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/.

/p>

请注意，为了了解JSON，您可以通过JSON解析器(例如 http: //json.parser.online.fr/-这将使您更好地了解所收到的内容以及如何对其进行解析.

双重说明:忘了提及此解决方案使用JQuery的情况-我相信有纯JavaScript方式可以实现此目标，但是它将变得更加冗长，而且(在我看来)更加难以理解.

So, I'm making a bunch of webpages for different communities, and on each I want to have a little weather box that I can customize, just with the name of the town, the current temperature, and the current weather condition. I want to be able to style it all exactly how I want. I found this site called Open Weather Map that seems to do exactly what I want. The problem is that I don't know how to use JSON. It's probably easy, but I seem to have gotten lost on any online tutorials I've tried.

This is an example of a URL for the page, that loads some JSON. http://api.openweathermap.org/data/2.5/weather?q=London,uk

I could just include this in my file and dynamically change the city and the country code to get the city I want. But how do I load this into my weather box? Let's say this is what I have:

<div class="weatherbox">

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

</div>

Then how do I access the data from the JSON? I want it to be done as simply as possible. Do I include the file like this to have access to the object, or is it more complicated?

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

解决方案

from your line of code:

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

this is incorrect, the api is returning JSON, it is not a javascript file so you don't access it in such a manner. Note that their API appears to take the city and country as a part of the URL parameters, so this you will need to plug in for the appropriate city/country.

For your specific question you could do something like:

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
    });
});

See http://jsfiddle.net/jsxm7j3n/1/ for it in action.

Note in order to understand the JSON, you can run it through a JSON parser such as the one at http://json.parser.online.fr/ - this will allow you to better understand the make up of what you're receiving back, and how to parse it.

Double note: forgot to mention this solution uses JQuery - i believe there are purely javascript ways to pull it off, but it will be much more verbose and (in my opinion) harder to understand.

这篇关于露天天气API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！