Question

我正在使用Open WeatherMap API执行FCC天气应用项目。我看到chrome正在通过HTTP提供地理定位的问题，所以我决定使用用户输入来代替邮政编码。

$(document).ready(function(){

  // var zipCode = "54901";
  var key = "id=524901&APPID=24d9e7758a30704bbc766831845bcb5f";

  $(".btn").on("click", function(){
    var zipCode = document.getElementById("zipCode").value

    var api = "api.openweathermap.org/data/2.5/weather?zip=" + zipCode + ",us" + "&" + key;  
    console.log("Before JSON"); //Works
    console.log(api); //Copy & Paste into browser works
    $.getJSON(api, function(data){
      console.log("JSON fired"); //Doesn't Log

    });  
  });  
});

HTML

<div>
  <h1>Weather App</h1>
  <input id="zipCode" type="text" placeholder="53154" />
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

用户输入提供有效的zipCode，一切正常，直到我对JSON的请求。这是因为我的api没有被正确连接吗？

我的代码：https://codepen.io/dylanmparks/pen/LyRyOP?editors=1011

Answer 1

＆＃13;

$(document).ready(function(){

  // var zipCode = "54901";
  var key = "id=524901&APPID=24d9e7758a30704bbc766831845bcb5f";
  
  $(".btn").on("click", function(){
    var zipCode = document.getElementById("zipCode").value
  
    var api = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode + ",us" + "&" + key;  
    console.log("Before JSON"); //Works
    console.log(api); //Copy & Paste into browser works
    $.getJSON(api, function(data){
      console.log("JSON fired => ", data); //Doesn't Log
    }).fail(function(jqxhr, textStatus, error){
      console.log('Error:', textStatus, error)
    });  
  });  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h1>Weather App</h1>
  <input id="zipCode" type="text" placeholder="94040" />
  <button class="btn btn-primary" type="submit">Submit</button>
</div>

＆＃13;

JSON没有为Weather App激活API密钥

1 个答案: