Question

我正在构建这个简单的应用程序，我从开放天气API获取JSON并使用jQuery在html中显示其内容。现在的问题是，即使我在$getJSON()内传递了正确的网址，我也无法显示任何内容。 github repo的链接是：https://github.com/gerak1925/local_weather

如果你只想要这里的代码：

var lat, lon;
var url = "";

function processJSON(url)
{
    $.getJSON(url, function(obj)
    {
        var temper = parseFloat(obj.main.temp) - 273.15;
        var weatherIcon = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';

        $('#content').html('<p>' + temper.toString() + ' <span id="unit">Celsius</span></p>');
        $('#content').append("<p>" + obj.weather[0].description + "</p>");
        $('#content').append("<p>" + obj.main.humidity + " humidity</p>");
        $('#content').append('<p><img src="' + weatherIcon + '" /></p>');
    });
}

function geoFind()
{
    var output = document.getElementById("content");

    $('button').hide();

    if (!navigator.geolocation) 
    {
        output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
        return;
    }

    function success(position) 
    {
        lat  = position.coords.latitude;
        lon = position.coords.longitude;

        url = "api.openweathermap.org/data/2.5/weather?lat=" + lat.toString() + "&lon=" + lon.toString() + "&APPID=5b1a0c598f588ad14577a6cfc89433b2";
    };

    function error() 
    {
        output.innerHTML = "Unable to retrieve your location";
    };

    output.innerHTML = "<p>Locating…</p>";

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

$('button').on('click',geoFind);
processJSON(url);

必要的HTML是：

<div id="content">

</div>
<button class="btn btn-default">Generate Weather</button>

我得到的JSON是：

{
  "coord": {
    "lat": 36.69,
    "lon": 23.04
  },
  "weather": [
    {

      "id": 801,
      "main": "Clouds",
      "description": "few clouds",
      "icon": "02d"
    }
  ],
  "base": "cmc stations",
  "main": {

    "temp": 299.451,
    "pressure": 1023.76,
    "humidity": 93,
    "temp_min": 299.451,
    "temp_max": 299.451,
    "sea_level": 1025.84,
    "grnd_level": 1023.76
  },
  "wind": {

    "speed": 2.51,
    "deg": 48.5054
  },
  "clouds": {
    "all": 12

  },
  "dt": 1467905351,
  "sys": {

    "message": 0.0059,
    "country": "GR",
    "sunrise": 1467861381,
    "sunset": 1467913755
  },
  "id": 251465,
  "name": "Gefyra",
  "cod": 200

}

聚苯乙烯。是的，即使对于相同的应用程序，我也读过类似的帖子，但没有运气。

Answer 1

尝试将getJSON调用更改为以下内容，因为此处需要POST。

$.post(url, function(obj)
    {
        var temper = parseFloat(obj.main.temp) - 273.15;
        var weatherIcon = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';

        $('#content').html('<p>' + temper.toString() + ' <span id="unit">Celsius</span></p>');
        $('#content').append("<p>" + obj.weather[0].description + "</p>");
        $('#content').append("<p>" + obj.main.humidity + " humidity</p>");
        $('#content').append('<p><img src="' + weatherIcon + '" /></p>');
    },'json');

Answer 2

假设您提供的代码是您正在使用的代码，那么在之后您已经尝试过查找时，您才会设置url：

$('button').on('click',geoFind); processJSON(url); // at this point url is still blank

通过将过程功能更改为：
来确认
function processJSON(url) { alert(url);

因为代码使用了回调，所以在设置url之后，你需要在地理位置查找的成功回调中调用processJSON：

function success(position) { lat = position.coords.latitude; lon = position.coords.longitude; url = "api.openweathermap.org/data/2.5/weather?lat=" + lat.toString() + "&lon=" + lon.toString() + "&APPID=5b1a0c598f588ad14577a6cfc89433b2"; processJSON(url); };

来自API的JSON内容未在html页面中显示

2 个答案: