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

Question

我想在 html 页面中显示莫金斯市的天气状况。如何显示查询的响应？我正在用我自己的笔记本电脑在 de Google Chrome 浏览器中进行测试。这是我目前所拥有的：

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

现在它是一个空白页面，但我最终想显示这 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 查询的响应？

How do I show the response of my Open Weather Map API query in my webpage?

html

javascript

api

yahoo-weather-api

openweathermap