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

     }); 
    } 
});