Question

我想在html页面中显示Morgins市的天气状况。如何显示查询的响应？我正在谷歌Chrome浏览器中使用自己的笔记本电脑进行测试。这就是我到目前为止所做的：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Weather</title>
  </head>
  <body>

    <script> 
        
      function getWeather() {
        var url = 'http://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&mode=xml&units=metric&cnt=10';
        loadJSON(url, gotData);
        
      }

    </script>

  </body>    
</html>

＆＃13;

现在它是一个空白页但我想最终显示这10天预测的一些天气元素...

Answer 1

您的数据应以 JSON 而非 xml 的形式返回。将模式删除为xml 我也做了如下修改，以显示div中的数据。

<强>样本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Setup</title>
</head>
<body>
  <div id="app"></div>
  <div id="parsed_json_api">
  </div>

  <script src="index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- https://home.openweathermap.org/api_keys -->
  <script>

    jQuery(document).ready(function($) {

      var parsedData = $('#parsed_json_api');

      $.ajax({
        url: "https://api.openweathermap.org/data/2.5/forecast/daily?q=morgins&APPID=001b0f58045147663b1ea518d34d88b4&units=metric&cnt=10",
        dataType: 'json',
   
        success: function (data) {
          data = JSON.stringify(data);
          parsedData.append('<div>'+data+'</div>');
        }
      });
    });
  </script>

</body>
</html>

如何在我的网页中显示我的Open Weather Map API查询的响应？

1 个答案: