使用AJAX在JavaScript中调用OpenWeather API

Question

I am trying to design a simple html page that displays data from the OpenWeather API using AJAX. 我正在尝试设计一个简单的html页面，该页面使用AJAX显示来自OpenWeather API的数据。 For some reason, my parameters, latitude and longitude, are not being put into the URL. 由于某种原因，我的参数（纬度和经度）未放入URL。 I'm sure it is small, but I can not seem to figure out what I am doing wrong. 我确定它很小，但是我似乎无法弄清楚我在做什么错。

My JavaScript Code: 我的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);
    }

My HTML Code: 我的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

I dont see an element with the id="zip". 我看不到id =“ zip”的元素。 same with city and state. 与城市和州相同。 And ur giving multiple elemnts the same id. 而您给多个要素相同的ID。 lat, long, temperature and windspeed are given twice which u never should do. 两次给出纬度，经度，温度和风速，这是您永远都不应做的。

使用AJAX在JavaScript中调用OpenWeather API

问题描述

1 个解决方案

解决方案1
0 2018-12-13 08:47:16

使用AJAX在JavaScript中调用OpenWeather API

问题描述

1 个解决方案

解决方案1 0 2018-12-13 08:47:16

解决方案1
0 2018-12-13 08:47:16