JSON 未触发 API 天气应用程序密钥

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>

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

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

Answer 1

$(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)
    });  
  });  
});

<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>

JSON 未触发 API 天气应用程序密钥

JSON not firing API Key for Weather App

javascript

jquery

json

weather-api