尝试使用API​​显示服务器返回的数据

Question

我正在建立一个小型网站，该网站将采用城市或邮政编码并从openweathermap.org返回天气（临时温度）数据。这是一项学校作业，我被要求使用异步调用。

我知道我正在从API中检索正确的数据。我不知道的是如何获取该信息并将其显示在名为temperature的列表项中。我在下面附上了我的脚本和html的片段。

 function getWeatherbyZip()
 {
     //event.preventDefault();          
     var zipCode = getZip();
     var req = new XMLHttpRequest();
     req.open("GET", "http://api.openweathermap.org/data/2.5/weather?zip="+zipCode+",us&appid=fa7d80c48643dfadde2cced1b1be6ca1", false);
     req.send(null);
     console.log(JSON.parse(req.responseText));

     req.addEventListener('load',function()
     {
          var response = JSON.parse(req.responseText);
          document.getElementById('temp').textContent = response.main.temp;
     });
 }  

相应的HTML块：

 Zipcode: <input type="number" id="myZip" min="11111" max="99999" value="00000"/>
 <input type="button" value="Search by Zipcode" onclick="getWeatherbyZip()"/>

 <li><span><p>Temperature:</p></span><span id="temp"></span></li>

Answer 1

您说您应该使用异步调用。如果是这种情况，那么为什么您将false传递给req.open()？如果你删除它，它将变为异步，req.responseText将不会存在，直到它完成。然后你的回调将正确读取它。

function getZip() {
  return document.getElementById('myZip').value;
}

function getWeatherbyZip() {
  //event.preventDefault();          
  var zipCode = getZip();
  var req = new XMLHttpRequest();
  req.open("GET", "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode + ",us&appid=fa7d80c48643dfadde2cced1b1be6ca1");
  req.send(null);

  req.addEventListener('load', function() {
    var response = JSON.parse(req.responseText);
    document.getElementById('temp').textContent = response.main.temp;
  });
}

Zipcode: <input type="number" id="myZip" min="11111" max="99999" value="00000" />
<input type="button" value="Search by Zipcode" onclick="getWeatherbyZip()" />

<span><p>Temperature:</p></span><span id="temp"></span>