为什么AJAX调用不起作用？

Question

我正在尝试从openweathermap网站获取JSON数据，下面是我编写的jQuery代码，我的目标是在控制台中记录JSON数据，但控制台日志什么也没显示。我尝试了警报功能是否正常工作，但是没有显示警报对话框。我无法确定问题出在哪里，请帮帮我吧！

$(document).ready(function(){

    $("#submitButton").click(function(){

        //alert("Hello");
        return getWeather();

    });
});

function getWeather(){


    var city=$("#city").val();

    if(city != ''){

        $.ajax({


            url : 'http://api.openweathermap.org/data/2.5/weather?q=' + city + "&units=metric" + "&APPID=8eca04841762dd31f99510429e97970a",
            type:"GET",
            dataType:"jsonp",
            success:function(data){

                //alert("hello");
                console.log(data);
                $("#showWeather").html();
            }

        });

    }

    else{


        $("#error").html("<div>City field cannot be empty</div>");
    }
}

Answer 1

Your API link using http protocol (not https). So it is possible reason why Mixed content error happened.

That's why you can see nothing or notice in some browsers that some insecure content is hidden.

So possible solution is to use http on your site to avoid mixed content. But it is strongly recommended to use https on both servers.