javascript - jQuery.getJSON() 在页面加载时不起作用。在点击事件中工作正常

Question

我正在制作一个“show-you-local-wather-app”(freecodecamp)，我希望它能够获取页面加载的数据。但什么也没发生。我对此很陌生，所以我想知道我是否错过了一些明显的东西。

如果我把它放在 $("#some_button").on("click"等里面，效果就很好......

我尝试将其放入 $(document).ready 中，但没有成功。我在这里缺少什么？

var latitude, longitude;
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
var url;

function success(pos) {
    var crd = pos.coords;
    latitude = crd.latitude;
    longitude = crd.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;
};

navigator.geolocation.getCurrentPosition(success);

// AJAX call

$.getJSON(url, function(data) {
    $("#location").html(data.name + ", " + data.sys.country);
    $("#weather_type").html(data.weather[0].description);
    var imgURL = data.weather[0].icon + ".png";
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
    $("#deg").html(data.main.temp);
    $("#windspeed").html(data.wind.speed);
    console.log(data);
});

我用 codepen 做到了如果有人想看的话。我正在使用OpenWeatherMap API .

谢谢!

Answer 1

这是更好的解决方案，如果您的 navigator.geolocation.getCurrentPosition(success) 成功返回，则运行 runner() 函数。

这是非常简单的例子Cordova Doc

$(document).ready(function() { 
var latitude, longitude;
var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
var url;

function success(pos) {
    var crd = pos.coords;
    latitude = crd.latitude;
    longitude = crd.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;

    runner(url);
};

navigator.geolocation.getCurrentPosition(success);

// AJAX call
 function runner(url){
  $.getJSON(url, function(data) {

    $("#location").html(data.name + ", " + data.sys.country);
    $("#weather_type").html(data.weather[0].description);
    var imgURL = data.weather[0].icon + ".png";
    $("#icon").html("<img src='http://openweathermap.org/img/w/" + imgURL + "'>");
    $("#deg").html(data.main.temp);
    $("#windspeed").html(data.wind.speed);
    console.log(data);
  });
}; //end of runner

}); //end of document.ready