1

以下代码在 JSbin 中有效，但在我将其直接复制并粘贴到 codepen、plunker 或 jsfiddle 时无效。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>


<script>
  function getWeather(){

  var ipCall = 'http://ip-api.com/json';
  $.getJSON(ipCall, locationCallBack)

  function locationCallBack(locationData){
    var lat =locationData.lat; 
    var lon = locationData.lon;

    var apiCall = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&units=imperial&appid=34e8aa0c1d8d15a560df7a7093711071';

    $.getJSON(apiCall, weatherCallBack)
  }



  function weatherCallBack(weatherData){
  var cityName = weatherData.name;
  var cityTemp = weatherData.main.temp;
  var weatherType = weatherData.weather[0].main;
  var weatherIcon = weatherData.weather[0].icon;  

  $('.cityName').append(cityName);
  $('.cityTemp').append(cityTemp);
  $('.weatherType').append(weatherType +' '+ weatherIcon);  
    }

  }
getWeather()
</script> 

<div class ="cityName">


</div>

<div class="cityTemp">

</div>

<div class="weatherType">

</div>

</body>
</html>

该代码显示用户位置以及该位置的天气信息。使用 api 获取地理位置数据和天气信息。

4

1 回答 1

1

如果您检查浏览器的控制台，您会看到如下错误：

jquery.min.js:4 混合内容：[CODEPEN/JSFIDDLE URL] 处的页面通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点“ http://ip-api.com/json ”。此请求已被阻止；内容必须通过 HTTPS 提供。

发生这种情况是因为 Codepen 和 JsFiddle 只允许HTTPS请求，而您使用的两个 API 都没有 HTTPS 协议。

在此处阅读更多信息： https ://blog.codepen.io/2017/03/31/codepen-going-https/

于 2017-06-19T03:37:03.313 回答