AJAX API代码检查? 地下天气api?

最后发布: 2017-02-11 03:18:13


问题

你好,所以我找到了一个关于如何使用地下天气API创建简单天气应用的教程。 我真的复制了整个代码(只需要很小的修改)来看看应用程序的运行方式,但它不起作用。 相关的html在这里:

<div class="container">

 <div id="forecast">
   <h1>Weather at <span id="location">
     </span></h1>
   <div id="imgdiv">
     <img id="img" src=""/>
   </div>
   <p>It is currently <span id="temp">
     </span> degrees F with <span id="desc">
     </span></p>
   <p>Wind: <span id="wind">
     </span></p>
  </div>
</div>

我的JavaScript在这里:

$(document).ready(function() {

  var Geo = {};
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  }
  else {
    alert("Geolocation off");
  }

  function error() {
    alert("We couldn't find you");
  }

  function success(position) {
    Geo.lat = position.coords.latitude;
    Geo.lng = position.coords.longitude;
    alert("Success");


   var key = "MYKEY"
   var Weather = "http://api.wunderground.com/api/MYKEY" +
   "/forecast/geolookup/conditions/q/" +
   Geo.lat + "," + Geo.lng + ".json";

  $.ajax({
    url: Weather,
    dataType: "jsonp",
    success: function(data) {
    var location = data["location"]["city"];
    var temp = data["current_observation"]["temp_f"];
    var img = data["current_observation"]["icon_url"];
    var desc = data["current_observation"]["weather"];
    var wind = ["current_observation"]["wind_string"];


      $("#location").html(location);
      $("#temp").html(temp);
      $("#desc").html(desc);
      $("#wind").html(wind);
      $("#img").attr("src", img);

    },
    fail: function() {
      alert("Nah son");
    }
   })
  }

})

HTML显示和加载时我收到一条警告“成功”,表示检索地理位置不是问题。 但是文本并没有改变以显示天气:/所以这是我的代码的一部分,我需要审查。

我认为我必须有一个问题,正确关闭所有东西或我如何使用$ .ajax(),因为这已经导致我在我最近一直在努力的其他项目中的很多问题。

任何帮助他都会非常感激! 我是编码的新手,所以如果我在那里的某个地方犯了一个愚蠢的错误,我道歉。 虽然只是从其他来源复制并添加警报和更改警报文本,但我认为不存在重大缺陷。

这是我用来构建此代码的文章的链接: http//www.developerdrive.com/2014/09/how-to-build-a-weather-app-with-html5s-geolocation-api/

这里是地下天气的API文档: https//www.wunderground.com/weather/api

谢谢你的帮助!

javascript jquery ajax api debugging
回答

我认为你的问题在这里:

var key = "MYKEY"
   var Weather = "http://api.wunderground.com/api/MYKEY" +
   "/forecast/geolookup/conditions/q/" +
   Geo.lat + "," + Geo.lng + ".json";

你错过了“;” 在密钥申报和转让之后。 你的天气网址是错误的bcz你没有通过api密钥。 它应该是:

var Weather = "http://api.wunderground.com/api/”+ key +”/forecast/geolookup/conditions/q/" + Geo.lat + "," + Geo.lng + ".json";

密钥应该替换为您在https://www.wunderground.com注册时获得的实际API密钥