Mein Wetter Api funktioniert nicht auf einem anderen Gerät

Question

Ich mache das lokale Wetter. Als ich es getestet habe, funktionierte es auf meinem Android-Gerät und meinem Laptop. Aber mein Desktop-Gerät hat nicht funktioniert, und sie verwenden das gleiche WLAN. Entschuldigung für mein Englisch. Mein 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); 
 
    } 
 
    }); 
 
});

body { 
 
    margin-top: 100px; 
 
    background: url('http://wallpapercave.com/wp/QGsncry.jpg'); 
 
} 
 

 
#white { 
 
    color: white; 
 
}

<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>

Answer 1

Das Problem ist https.

Wie Sie Ihre App gehostet haben auf https://testmyblog.000webhostapp.com/https und Ihre API ist auf httphttp://api.openweathermap.org/ so neueren Browsern Fehler aufgrund Mixed Content werfen. Bedeutet, wenn Ihre Website unter HTTPS ist, können Sie keine Ressourcen von http nicht sichere Domäne laden. Dies ist eine Browser-spezifische Funktion und somit wird Ihre Anfrage vom Browser selbst blockiert.

Also, wenn Ihre Freunde jede Frage, die sich .. sie bitten, Ihre Website zu laden, ohne HTTPS. Means fragen sie

http://testmyblog.000webhostapp.com/

statt https Version/