Question

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

这是页面的URL的示例，它加载了一些JSON。 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

假设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: *

这意味着：

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

因为默认情况下Ajax是异步的（这就是A所代表的），所以你需要将赋值包装到一个函数中，该函数在请求完成后执行。

Answer 2

来自您的代码行：

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

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

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

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/处的JSON解析器 - 这将使您能够更好地理解您收到的内容的构成，以及如何解析它。

双重说明：忘了提这个解决方案使用JQuery - 我相信有纯粹的javascript方法来实现它，但它会更加冗长，而且（在我看来）更难理解。

Answer 3

以下代码运行。您只需更改Api密钥

完整的教程：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>

开放天气API

3 个答案: