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

我猜测为什么 $.ready 不起作用，当 DOM 准备好时，$.getJSON 仍在从外部获取 API。

但还有一个选择

使用 setInterval

要在运行设定的次数后停止，只需在间隔中添加一个计数器，然后当它达到该次数时停止。

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

navigator.geolocation.getCurrentPosition(function (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;
});

// AJAX call
var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 2){
        clearInterval(interval);
    }
    $.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.dir(data);
    });
}, 2000);

Answer 2

这是更好的解决方案，如果您的 navigator.geolocation.getCurrentPosition(success) 成功 returns 然后运行 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

Answer 3

好的，我这样做了，现在可以了。我猜原则上它与7urkm3n的答案相同？

function success(pos) {
    var crd = pos.coords;
    getPos(crd.latitude, crd.longitude);
};

navigator.geolocation.getCurrentPosition(success);

function getPos(latitude, longitude) {
    var apiKey = "9b6a0d53a4ed3ff657c6ff6e18ffa42f";
    var url = "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey;

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

Answer 4

您的代码在您掌握坐标之前发出 $.getJSON 调用。您需要等到获得坐标，然后然后触发 ajax 调用。请注意在下面的代码中调用 ajaxCall 的位置：

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

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

$(document).ready(function(){

  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
    )
    ajaxCall(url);
  }

  navigator.geolocation.getCurrentPosition(success);
});

它位于 success 函数内部 — 因此在数据可用之前它不会触发。

jQuery.getJSON() 无法处理页面加载。在点击事件中工作正常

jQuery.getJSON() not working on page load. Works fine inside a click event

javascript

api

ajax

jquery

getjson