控件未进入 getJSON() 函数

使用openweathermap API 处理副项目...我正在使用自己的API密钥，这里提到的密钥是通用的，适用于没有帐户的人，无论如何它都是免费的......我也在使用引导切换库...

.HTML：

<!DOCTYPE html>
<html>
<head>
<title>Weather Now</Title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1 class="text-center">Local Weather</h1>
<input id="tog" type="checkbox" checked data-toggle="toggle" data-size="large" data-on="&#8451;" data-off="&#8457;" data-onstyle="primary" data-offstyle="success">
<ul>
<li id="city"></li>
<li id="weatherType"></li>
<li id="temp"></li>
<li id="windSpeed"></li>
</ul>
</body>
</html>

JS/jQuery：

$(document).ready(function(){
var long,lat,weatherType,temp,kelvin,celsius,fahrenheit,city,apiObj;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
long = position.coords.longitude;console.log(long);
lat = position.coords.latitude;console.log(lat);
apiObj = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=b1b15e88fa797225412429c1c50c122a1";
console.log(apiObj);
$.getJSON(apiObj,function(data){
console.log("hi");
weatherType = data.weather[0].description;console.log(weatherType);
kelvin = data.main.temp;console.log(kelvin);
fahrenheit = (kelvin)*(9/5)-459.67;console.log(fahrenheit);
celsius = kelvin-273;console.log(celsius);
city = data.city;console.log(city);
if($('#tog').prop('checked')){
$('#temp').html('hi '+celsius); //doesnt work
}
else{
$('#temp').html(fahrenheit);
}
});
console.log("bye");
});
}
});

示例 JSON：

http://samples.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=b1b15e88fa797225412429c1c50c122a1

{
"coord":{
"lon":139.01,
"lat":35.02
},
"weather":[
{
"id":800,
"main":"Clear",
"description":"clear sky",
"icon":"01n"
}
],
"base":"stations",
"main":{
"temp":285.514,
"pressure":1013.75,
"humidity":100,
"temp_min":285.514,
"temp_max":285.514,
"sea_level":1023.22,
"grnd_level":1013.75
},
"wind":{
"speed":5.52,
"deg":311
},
"clouds":{
"all":0
},
"dt":1485792967,
"sys":{
"message":0.0025,
"country":"JP",
"sunrise":1485726240,
"sunset":1485763863
},
"id":1907296,
"name":"Tawarano",
"cod":200
}

控制台输出：输出长整型、纬度型、api-url 和 bye...中间没有任何东西(getJSON 中的代码(...发生了什么事情？

更新：

因此，正如 ppl 在这里提到的，我检查了东西，它抛出了一个错误......错误是">阻止加载混合活动内容">

什么是混合内容？(参考自堆栈溢出答案( 当用户访问通过 HTTP 提供的页面时，他们的连接会受到窃听和中间人 (MITM( 攻击。当用户访问通过HTTPS提供的页面时，他们与Web服务器的连接使用SSL进行身份验证和加密，从而免受窃听者和MITM攻击。

但是，如果 HTTPS 页面包含 HTTP 内容，则攻击者可以读取或修改 HTTP 部分，即使主页是通过 HTTPS 提供的。当HTTPS页面包含HTTP内容时，我们称该内容为"混合"。用户正在访问的网页仅部分加密，因为某些内容是通过 HTTP 检索的未加密的。混合内容阻止程序阻止 HTTPS 页面上的某些 HTTP 请求。

openweathermap"提供的API调用是"http"，就我而言，因为它是一个副项目，我硬编码/添加了"s"，使其成为"https"并且它起作用了！

如果您正在编写专业代码，我建议您向 API 供应商询问 https/安全连接！感谢所有的帮助！

"api-url"和"bye"之间的内容是jQuery.getJSON()调用。那里的函数是成功回调。它没有被执行的事实意味着getJSON()必须未成功完成。

要找出原因，您应该调试该请求。

该 URL 是否给出响应？
是成功响应(状态代码 2xx(吗？
它会返回 JSON 吗？

如果这些都对您没有帮助，您可以将getJSON-call 转换为$.ajax-call 并添加错误回调。这当然应该被称为。看看它得到什么样的错误。

$.ajax({
dataType: "json",
url: apiObj,
success: function (data) { /* your function body */ }
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error(jqXHR, textStatus, errorThrown);
console.error(jqXHR.responseJSON);
});

更新：我收到401 未授权作为响应。

{
"cod": 401,
"message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."
}

相关内容

最新更新

热门标签：