JSON沒有觸發API密鑰對的天氣應用

Question

我正在使用Open API WeatherMap 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沒有正確連接？

我codepen：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>