API調用不工作在jquery

我正在努力創建一個Web應用程序來顯示本地天氣。我首先調用navigator.geolocation獲取經度和緯度，然後使用下面的鏈接給API調用並獲得響應。API調用不工作在jquery

試圖讓響應只是現在，將轉換後爲HTML。但沒有得到任何東西。請幫忙。

我codepen- http://codepen.io/nabendu82/pen/ONPvrN

$(document).ready(function() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 
     }); 
    } 

    $("#getTemp").on("click", function() { 
     $.getJSON("api.openweathermap.org/data/2.5/weather?lat=latitude&lon=longitude", function (json) { 
      $(".message").html(JSON.stringify(json)); 
     }); 
    }); 
});

來源

2016-03-01 nabs82

你應該使用類似：

$.getJSON('api.openweathermap.org/data/2.5/weather?lat='+latitude+'&lon='+longitude, function (json) {

否則你逝去的緯度和經度爲字符串，而不是它們的值

來源

2016-03-01 11:54:23

@ nabs82請問你能向我們展示console.log的經緯度變量的結果嗎？ –

var baseUrl = "//api.openweathermap.org/data/2.5/weather?"; 
var lat = "lat="+ latitude; 
var lan = "&lon="+ longitude; 

$.getJSON(baseUrl+lat+lan, function(json){ 
$(".message").html(JSON.stringify(json)); 
})

來源

2016-03-01 11:58:06

你錯過了你的代碼中的雙引號 –

謝謝！更正 –

申報變量。此API需要密鑰 - http://openweathermap.org/faq#error401

$(document).ready(function() { 
    var latitude; 
    var longitude; 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      latitude = position.coords.latitude; 
      longitude = position.coords.longitude; 
     }); 
    } 

    $("#getTemp").on("click", function() { 
     $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude, function (json) { 
     $(".message").html(JSON.stringify(json)); 
    }); 
});

}）;

來源

2016-03-01 11:58:16 user3292362

爲什麼要在OP之前聲明它。它們都在相同的範圍內。這裏不需要全局變量 –

謝謝大家的幫助。但它仍然不起作用。我沒有獲取API內容。有人可以看看我的筆。 http://codepen.io/nabendu82/pen/ONPvrN – nabs82

兩件事：

獲得API變量經度和緯度適合
您的API調用使用相對路徑，嘗試用絕對鏈接

調用它試試這個代碼

$(document).ready(function() { 
var latitude = 0; 
var longitude = 0; 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
        latitude = position.coords.latitude; 
        longitude = position.coords.longitude; 
       }); 
      } 

      $("#getTemp").on("click", function() { 
     var url = "http://api.openweathermap.org/data/2.5/weather?lat="+latitude +"&lon="+longitude ; 
       $.getJSON(url , function (json) { 
        $(".message").html(JSON.stringify(json)); 
       }); 
      }); 
});

來源

2016-03-01 12:08:14

正確使用appid來自天氣api。

$(document).ready(function() { 
var latitude; 
var longitude; 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function (position) { 
     latitude = position.coords.latitude; 
     longitude = position.coords.longitude; 
    }); 
} 

$("#getTemp").on("click", function() { 
var appid = 'xxxxxxxxxxxxxxxxxxxxxxx'; 
var url = "api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid" + appid; 
    $.getJSON(url, function (json) { 
    $(".message").html(JSON.stringify(json)); 
}); 
});

來源

2016-03-02 03:19:42 nabs82

API調用不工作在jquery

回答

相關問題