$ .getJSON не возвращает данные

Я беру курс на freecodecamp, и я сейчас застрял в приложении zipline для погоды. API, который я вызываю, - OpenWeatherMap. Проблема для меня - это $ .getJson не возвращает данные, даже если ссылка правильная. Я размещал предупреждение вне $ .getJSON, и он отлично работает. Я поделюсь с исходным кодом:

Все это делается в кодефене, если вы не видите тег html, потому что codepen делает это сам по себе. CSS тоже делает это.

HTML

<head> 
    <title>Weather App</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<body> 
    <h1>Free Code Camp Zipline</h1> 
    <h2>Local Weather App!</h2> 
    <p id="latitude"></p> 
    <p id="longitude"></p> 
    <div id="weather"></div> 
    <footer> 
    <p>Copyright © Luis M. Alvarez 2016. All Rights Reserved</p> 
    </footer> 
</body>

CSS

 body { 
     margin: 0; 
     font-family: "Georgia"; 
    } 

    h1, h2 { 
     text-align: center; 
    } 
    p { 
    font-size: 20px; 
    text-align: center; 
    }

Javascript

$(document).ready(function(){ 
    ///Geolocation 

    //Find the geolocation 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     $("#latitude").html("latitude: " + position.coords.latitude); 
     $("#longitude").html("longitude: " + position.coords.longitude); 

     ///Weather API 

     //Setup for weather app  
     var key = "d160d975b9920be65fcf14313e95afb4"; 

     var weatherNow = "http://api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + key + "&units=metric"; 

     //Get the weather 
     //Here alert does work 
     $.getJSON(weatherNow, function(data) { //Where weatherNow is on this line the alert works too example: $.getJSON(alert(weatherNow), function(data) { 
     //Here the alert doesn't work 
     alert(weatherNow); 

    }); 

    }); 
}; 
});

Комментарии добавлены здесь, чтобы они не вступали в конфликт с кодом. Пожалуйста, дайте подробное объяснение, почему он не работает и как заставить его работать.

Ссылки проекта: https://codepen.io/Zero720/pen/RoOwaw

http://openweathermap.org/current

источник

2017-01-02 Luis Alvarez

Программирование JavaScript будет гораздо легче, если вы ознакомитесь с консоли JavaScript в вашем браузере. Вот ошибка, которая будет появляться в вашей:

Mixed Содержание: страница на «https://codepen.io/Zero720/pen/RoOwaw» был загружен через HTTPS, но запросил небезопасный XMLHttpRequest конечную точку «http://api.openweathermap.org/data/2.5/weather?lat=42.9976979&lon=-77.50486959999999&APPID=d160d975b9920be65fcf14313e95afb4&units=metric». Этот запрос заблокирован; содержимое должно быть передано через HTTPS.

источник

2017-01-02 22:23:24 ceejayoz

Как я могу сделать запрос? –

@LuisAlvarez Похоже, что они разрешают HTTPS платить пользователям. https://openweathermap.desk.com/customer/portal/questions/8166727-http-to-https. Ваш Codepen, по-видимому, доступен как HTTP: http://codepen.io/Zero720/pen/RoOwaw – ceejayoz

Но люди сделали он на этой странице, и он просматривает пример проекта: http://codepen.io/FreeCodeCamp/full/bELRjV –

$ .getJSON не возвращает данные

ответ

Смежные вопросы