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

Question

我正在构建一个小型站点，它将获取城市或邮政编码并返回来自 openweathermap.org 的天气(暂时为临时)数据。这是一项学校作业，我被要求使用异步调用。

我知道我正在从 API 检索正确的数据。我不知道的是如何获取该信息并将其显示到名为温度的列表项中。我在下面包含了我的脚本和 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 block :

 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>