2016-05-08 207 views
2

我试图做一个页面,将使用openweathermap API来显示用户的城市和本地温度,不幸的是它似乎并没有处理JSON api,并且是什么也不做。据我所知,我的代码没有问题,所以我不明白什么是错的。
这里的链接的jsfiddle和javscript代码:
https://jsfiddle.net/qo2h1L9e/2/Javascript似乎并没有处理JSON api

$(document).ready(function() { 
    var data; 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var lat = position.coords.latitude; 
     var lon = position.coords.longitude; 
     console.log(lat); 
     console.log(lon); 
     console.log("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886"); 
     $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886", function(json) { 
     data = json; 
     console.log(data.name); 
     $("#city").text(data.name); 
     }); 
    }); 
    } 
}); 
+0

地址是相对于当前'window.location'而言的,'api.openweathermap.org'也可以是有效的目录名称。在地址中包含协议和'//锚点以将其识别为主机名 - '“http://api.openweathermap.org/...”' –

+0

我按照你的建议做了,它没有帮助。当我从控制台获取URL并将其放入搜索引擎的地址栏中时,我在我的页面上获得了所需的JSON对象,但由于某些原因,我的代码似乎并未收到。 – majestyc54

+0

您是否收到任何错误?浏览器通常会记录Ajax请求在其控制台失败的原因。 –

回答

1

编码这个时候我有一个类似的问题。假设你在FCC上?

反正,试试加入& callback =?到api网址。您可能需要以JSONP而不是JSON来获取数据。

此外,您不需要定义数据。你可以直接通过json参数访问对象。

0

我已经做了的jQuery试试这个代码

 $(document).ready(function() { 
      var data; 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function(position) { 
        var lat = position.coords.latitude; 
        var lon = position.coords.longitude; 
        console.log(lat); 
        console.log(lon); 
        console.log("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886"); 
//     $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&APPID=4907e373098f091c293b36b92d8f0886", function(json) { 
//      data = json; 
//      console.log(data.name); 
//      $("#city").text(data.name); 
        //     }); 
        var url = 'http://api.openweathermap.org/data/2.5/weather'; 
        var params = {}; 
        params.lat = lat; 
        params.lon = lon; 
        params.APPID = "4907e373098f091c293b36b92d8f0886"; 

        $.ajax({ 
         type: "GET", 
         url: url, 
         dataType: "jsonp", 
         contentType: "application/json; charset=utf-8", 
         data: params, 
         success: function (res) { 
          console.log(res); 
         }, 
         error: function (res) { 
         } 
        }); 


       } 
       ); 
      } 
     }); 

的问题是在json。对于跨域使用jsonp

相关问题