Question

我正在尝试设计一个简单的html页面，该页面使用AJAX显示来自OpenWeather API的数据。由于某种原因，我的参数（纬度和经度）未放入URL。我确定它很小，但是我似乎无法弄清楚我在做什么错。

我的JavaScript代码：

var request = new XMLHttpRequest();

    function getWeather() {
        var latitude = document.getElementById("lat").value;
        var longitude = document.getElementById("long").value;
        request.open('GET', 'https://openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&appid=547fa6dfa44cff13fa92bba2c465b366', true); 
        request.send();
        request.onreadystatechange = displayData;
    }


    function displayData() {
        if(request.readyState === 4 && request.status === 200) {
           var resultData = JSON.parse(request.responseText);
           var temperature = document.getElementById("temperature");
           var windspeed = document.getElementById("windspeed");
           temperature.value = resultData.main.temp;
           windspeed.value = resultData.wind.speed;
           document.getElementById("resultset").style.visibility = "visible";
        }
     }

     window.onload = function() {
         var btn = document.getElementById("btn");
         btn.addEventListener("click", getWeather, false);
    }

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta id="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
   <header>
      <h1>Weather Report</h1>
   </header>
   <article>
      <h2>Weather Data</h2>

         <form action="#" method="post" id="theForm" novalidate>
         <fieldset id="zipset">
            <label for="lat" id="lat">Latitude:</label>
            <input id="lat" type="number" />
            <label for="long" id="long">Longitude</label>
            <input id="long" type="number" />
         </fieldset>
         <fieldset id="resultset">
            <label for="temperature" id="temperature">Temperature:</label>
            <input id="temperature" type="text" />
            <label for="windspeed" id="windspeed">Wind Speed:</label>
            <input id="windspeed" type="text" />
         </fieldset> 
         </form>
       <button id="btn">Submit Coordinates</button>
   </article>
   <script src="js/weather_report1.js"></script>
</body>

Answer 1

我看不到带有id =“ zip”的元素。与城市和州相同。而您给多个要素相同的ID。两次给出纬度，经度，温度和风速，这是你永远不应该做的。

使用AJAX以JavaScript调用OpenWeather API

1 个答案: