Question

使用openweathermap api在侧面项目上

正常工作 ... 我我正在使用我自己的api密钥，这里提到的是通用的，适用于没有帐户的人，无论如何都是免费的... 同样我正在使用bootstrap toggle lib ...

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
}

控制台输出： 输出Long，Lat，api-url和bye ...之间没有任何东西（getJSON中的代码）...... 发生了什么？

更新

正如ppl在这里所提到的，我检查了一些东西并且它发出错误...错误是＆＃34; 阻止加载混合活动内容 “< / p>

什么是混合内容？（来自stackoverflow回答）当用户访问通过HTTP提供的页面时，他们的连接将被打开以进行窃听和中间人（MITM）攻击。当用户访问通过HTTPS提供的页面时，他们与Web服务器的连接将通过SSL进行身份验证和加密，从而防止窃听者和MITM攻击。

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

＆lt; openweathermap＆＃39;提供的 API调用在我的情况下是＃http;＃，因为它是一个侧面项目我硬编码/添加＆＃39; s＆＃39;制作它＆＃39; https＆＃39;它有效！

如果您正在编写专业代码我建议请API供应商进行https /安全连接！谢谢你的帮助！

Answer 1

＆＃34; api-url＆＃34;之间的事情和＆＃34; bye＆＃34;是jQuery.getJSON()电话。那里的功能就是成功回调。它没有被执行的事实意味着getJSON()一定不能成功完成。

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

该网址是否会给出回复？
是成功回复（状态代码2xx）？
是否返回JSON？

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

$.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 Unauthorized 作为回复。

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

控件未进入getJSON（）函数

1 个答案: