无法使用天气 json API

Question

我想从此 API 获取天气详细信息，但由于某些奇怪的原因，它似乎不起作用。

这是一个 mashape API。 https://market.mashape.com/fyhao/weather-13

这是我尝试过的，

function getWeather() {
  var lat=null;
  var lon=null;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lat = position.coords.latitude;
      lon = position.coords.longitude;
    });
  }
  var url =
    "http://simple-weather.p.mashape.com/weatherdata?lat=" +
     lat +
    "&lng=" +
    lon;
  $.ajax({
    url: url,
    type: "GET",
    dataType: "json",
    success: function(data) {
      $(".location").html(
        "<h4>" +
          data.query.results.channel.location.city +
          ", " +
          data.query.results.channel.location.country +
          "</h4>"
      );
      $(".weather").html(
        "<h4>" + data.query.results.channel.item.condition.text + "</h4>"
      );
      $(".temperature").html(
        "<h4>" + data.query.results.channel.item.condition.temp + "</h4>"
      );
    },
    error: function(err) {
      alert(err);
    },
    beforeSend: function(xhr) {
      xhr.setRequestHeader(
        "X-Mashape-Authorization",
        "MYKEY"
      );
    }
  });
}
$(document).ready(function() {
  $(".info").addClass("animated pulse");
  getWeather();
});

任何帮助将不胜感激。

编辑：- 由于 ajax 中的错误函数，我收到一个警告错误，上面写着“[object Object]”。起初我没有看到错误，因为我阻止了页面上的弹出窗口。

Answer 1

几件事：

• getCurrentPosition() 是异步的。按照您设置的方式，当 lat 和 lon 变量设置为坐标时，$.ajax 请求将已经与null lat 和 lon 变量一起发送
• 此 API 需要 https 而不是 http
• 标头是X-Mashape-Key 而不是X-Mashape-Authorization

这是一个例子：

function getWeather() {
    var lat = null;
    var lon = null;
    if (navigator.geolocation) {
        //we are putting everything inside the callback
        navigator.geolocation.getCurrentPosition(function (position) {
            lat = position.coords.latitude;
            lon = position.coords.longitude;

            var url =
                "https://simple-weather.p.mashape.com/weatherdata?lat=" +
                lat +
                "&lng=" +
                lon;
            $.ajax({
                url: url,
                type: "GET",
                success: function (data) {
                    console.log(data);
                },
                error: function (err) {
                    console.error('error ' + JSON.stringify(err));
                },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader(
                        "X-Mashape-Key", "KEY"
                    );
                }
            });

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

    getWeather();
});