如何从JavaScript中的API中提取数据？

Question

I'm working on a little weather app project, but now that i've changed the code to make the long and lat change depending on you geo location, the button doesn't work. When i click it nothing happens, i can't even tell if the API is pulling the data. Here is my code as well as a codepen I made to fool around with. http://codepen.io/lettda/pen/yaGaLx

$(document).ready(function(){
    $("#reveal").on("click", function(){
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            lat = position.coords.latitude;
            long = position.coords.longitude;

        var long;
        var lat;
        var api = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=de61ccfbde0405f57d64dbb53323fccf";

                $.getJSON(api, function(data){
                    $(".message").html(JSON.stringify(data))
                });
            });
        };
    });
});

Answer 1

open your developer tools (in chrome press F12) and have a look into the console:

pen.js:4 getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://.... for more details.

it's an simple cross origin problem