开放天气 API

Question

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

这是加载一些 JSON 的页面 URL 示例。 http://api.openweathermap.org/data/2.5/weather?q=London,uk

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

<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 方法来实现它，但它会更加冗长并且（在我看来）更难理解。

Answer 2

假设 jQuery：

<script>
// Load the data through ajax, not by including it like a script:

$.get('http://api.openweathermap.org/data/2.5/weather?q=London,uk', function(data) {
    $('.weatherbox .temperature').text(data.main.temp);
});

</script>

当您查看从 URL 到 API 的响应标头时，它会发送 2 个重要的标头：

Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *

这意味着：

1. 返回 JSON 对象，而不仅仅是一个文件。你不必使用JSON.parse() 或$.getJSON。
2. 允许任何人通过 ajax 请求它（Ajax 的安全方面）。

因为 Ajax 默认是异步的，（这就是 A 的意思），你需要将你的赋值封装到一个函数中，在请求完成后执行。

Answer 3

以下代码运行。您只能更改 Api Key

完整教程：https://www.revilodesign.de/blog/sonstiges/wetterdaten-mit-openweathermap-api-in-eigene-webseite-einbinden/

// API URL
var apiUrl				=	'https://api.openweathermap.org/data/2.5/weather?q=London,uk&units=metric&APPID=YOUR_API_KEY';

// AJAX
jQuery.ajax ({
	url: apiUrl,
	type: 'GET',
	dataType: 'jsonp',
	success: function(data) {

		console.log(data);

		// COORDINATES
		var coordLat			=	data.coord.lat;
		var coordLng			=	data.coord.lon;
		
		// WEATHER
		var weatherId			=	data.weather[0].id;
		var weatherMain			=	data.weather[0].main;
		var weatherDesc			=	data.weather[0].description;
		var weatherIcon			=	'<img src="https://openweathermap.org/img/w/' + data.weather[0].icon + '.png" />';
		var weatherBg			=	data.weather[0].icon;
		
		// BASE
		var baseData			=	data.base;
		
		// TEMP
		var mainTemp			=	data.main.temp;
		var mainPressure		=	data.main.pressure;
		var mainHumidity		=	data.main.humidity;
		var mainTempMin			=	data.main.temp_min;
		var mainTempMax			=	data.main.temp_max;
		
		// VISIBILITY
		var visibility			=	data.visibility;
		
		// WIND
		var windSpeed			=	data.wind.speed;
		var windDeg				=	data.wind.deg;
		
		// CLOUDS
		var clouds				=	data.clouds.all;
		
		// DT
		var dt					=	data.dt;
		
		// SYS
		var sysType				=	data.sys.type;
		var sysId				=	data.sys.id;
		var sysMessage			=	data.sys.message;
		var sysCountry			=	data.sys.country;
		var sysSunrise			=	data.sys.sunrise;
		var sysSunset			=	data.sys.sunset;
		
		// ID
		var id					=	data.id;
		
		// NAME
		var name				=	data.name;
		
		// COD
		var cod					=	data.cod;
					
		jQuery('#city').html( name );
		jQuery('#temp').html( mainTemp + '° C' );
		jQuery('#desc').html( weatherDesc );
	}
	
});

#weatherbox {
  width: 200px;
  height: 20px;
  background: #b4ecff;
  border-radius: 8px;
  display: table;
  margin: 20px auto;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  overflow:hidden;
  padding: 0 0 10px 0;
}
strong,
span {
  width: 100%;
  display: inline-block;
  padding: 10px 0;
  margin: 0;
}
p {
  padding: 0;
  margin: 0
}
strong {
  background: #00769d;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="weatherbox">

  <strong id="city"></strong>
  <span id="temp"></span>
  <p id="desc"></p>

</div>