我的天气Api无法在其他设备上使用

时间:2017-07-20 10:43:13

标签: javascript jquery html

我正在做本地天气。当我测试它时,它可以在我的Android设备和笔记本电脑上运行。但我的桌面设备没有工作,他们使用相同的wifi。对不起我的英语不好。 我的HTML:



$(document).ready(function() {
  $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather",
    jsonp: "callback",
    dataType: "jsonp",
    data: {
      id: "1580578",
      APPID: "1d6bb0530f112b543e38e98b7f2b3d36"
    },
    success: function(data) {
      var weatherType = data.weather[0].description;
      var kelvin = data.main.temp;
      var windspeed = data.wind.speed;
      var city = data.name;
      var doC = kelvin - 273;

      $(".name").html(city);
      $(".doC").html(Math.floor(doC));
      $(".windspeed").html(windspeed);
      $(".weatherType").html(weatherType);
      $('.current').html('<img src="http://openweathermap.org/img/w/' + data.weather[0].icon + '.png" /> ' + data.weather[0].main);
    }
  });
});
&#13;
body {
  margin-top: 100px;
  background: url('http://wallpapercave.com/wp/QGsncry.jpg');
}

#white {
  color: white;
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid>
  <div class=" row ">
    <h1 style="text-align: center" id="white"> Weather</h1>
    <center>
      <div class="current"></div>

      <table style="text-align: center">
        <tr>
          <th>
            <h3> Description: </h3>
          </th>
          <th>
            <h3 style="text-align: center" class="weatherType btn btn-default"> </h3>
          </th>
        </tr>
        <tr>
          <th>
            <h3> City: </h3>
          </th>
          <th>
            <h3 style="text-align: center" class="name btn btn-default"> </h3>
          </th>
        </tr>

        <tr>
          <th>
            <h3> Temperature: </h3>
          </th>
          <th>
            <h3 style="text-align: center" class="doC btn btn-default"> </h3>
          </th>
        </tr>
        <tr>
          <th>
            <h3> WindSpeed: </h3>
          </th>
          <th>
            <h3 style="text-align: center" class="windspeed btn btn-default"> </h3>
          </th>
        </tr>
      </table>
    </center>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

问题是https://testmyblog.000webhostapp.com/

由于您已在http://api.openweathermap.org/ https 上托管了应用,并且您的API位于 http Mixed Content,因此最近的浏览器会因{导致错误{1}}。表示如果您的网站位于HTTPS,则无法从http非安全域加载资源。这是浏览器特定的功能,因此,您的请求被浏览器本身阻止。

因此,如果您的朋友遇到任何问题,请让他们加载您的网站,而不是HTTPS.意味着要求他们加载

  

http://testmyblog.000webhostapp.com/

而不是https版本/