我如何使用JSON的Jquery在api.openweathermap获取天气信息

Question

我有这个API

http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10 

，我会得到使用jQuery的信息（城市名称，天气...）。

我该怎么做？

Answer 1

使用Ajax调用来获取JSON这样

$(document).ready(function(){ 
$.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10",function(result){ 
    alert("City: "+result.city.name); 
    alert("Weather: "+ result.list[0].weather[0].description); 
    }); 
}); 

这里的小提琴：http://jsfiddle.net/cz7y852q/

---

如果你不想使用jQuery：

var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
      if (xmlhttp.status == 200) { 
       var data = JSON.parse(xmlhttp.responseText); 
       //access json properties here 
       alert("Weather: "+ data.weather[0].description); 
      } 
      else if (xmlhttp.status == 400) { 
       alert('There was an error 400'); 
      } 
      else { 
       alert('something else other than 200 was returned'); 
      } 
     } 
    }; 
    xmlhttp.open("GET", "http://api.openweathermap.org/data/2.5/weather?id=524901&APPID=7dba932c8f7027077d07d50dc20b4bf1", true); 
    xmlhttp.send(); 

使用如果URL中的那个不起作用，则您自己的API key。

Answer 2

就发出AJAX GET请求：

var url = "http://api.openweathermap.org/data/2.5/forecast/daily?q=Montpellier&mode=json&units=metric&cnt=10" 

$.getJSON(url).then(function(data) { 
    console.log(data); 
}); 

api.openweathermap.org实现CORS，这意味着你不会有跨域问题，可以简单地请求API使用AJAX。