API接受URL，但在一個變量

Question

我希望能夠動態生成使用位置我的API查詢將不接受URL。

如果我CONSOLE.LOG我的地理定位和複製到我的AJAX API URL它的作品，因爲它應該。

然而，那一刻我嘗試通過URL與它的字符串變量，它停止工作。

所以，當我刪除了ajax URL，並與geoAddress變量，它包含了相同的URL替換它，它停止工作。

這裏的codepen http://codepen.io/Middi/pen/peLMBQ

這裏是我的代碼。

var geoAddress; 

$(document).ready(function ($) { 

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function (position) { 

     geoAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&units=metric&appid=6776250c9f90718881dbecfc4c7c5319"; 

    }); 
} 


$.ajax({ 
    url: geoAddress, 
    success: function (parsed_json) { 
     var location = parsed_json.name; 
     var country = parsed_json.sys.country; 
     var temp_c = Math.round(parsed_json.main.temp); 
     var description = parsed_json.weather[0].description; 
     var icon = parsed_json.weather[0].icon; 


     // Add to Dom 
     $('.weather-place').html(icon + "<p>" + location + ", " + country + "</p><p>" + temp_c + "°C</p>" + "</p><p>" + description).fadeIn(400); 

    } 
}); 
}); 

Answer 1

錯誤到達您的代碼中，因爲AJAX調用即時觸發而無需等待IF條件。這就是爲什麼當Ajax調用消防它接收可變geoAddress

空白值試試這個方式，它的工作：

var geoAddress; 

$(document).ready(function ($) { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 

      geoAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&units=metric&appid=6776250c9f90718881dbecfc4c7c5319"; 

      $.ajax({ 
       url: geoAddress, 
       success: function (parsed_json) { 

        var location = parsed_json.name; 
        var country = parsed_json.sys.country; 
        var temp_c = Math.round(parsed_json.main.temp); 
        var description = parsed_json.weather[0].description; 
        var icon = parsed_json.weather[0].icon; 

        // Add to Dom 
        $('.weather-place').html(icon + "<p>" + location + ", " + country + "</p><p>" + temp_c + "°C</p>" + "</p><p>" + description).fadeIn(400); 
       } 
      }); 

     }); 
    } 
});