问开放天气API

EN

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

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

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

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

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