0

我正在尝试使用 XMLHttpRequest 从我的网页上的天气服务 API 更新内容。

不幸的是，我不熟悉使用此 javascript 功能。我已经浏览了 mozilla 文档，但我仍然对如何从我的网页上的 API 更新信息感到有些困惑。

我的 Javascript 包括刷新功能和 addWeather 功能。刷新功能假设每小时刷新一次我网站上的 api 信息（这利用了我需要帮助的 xmlhttprequest）。addWeather 函数将 API 信息添加到 html 中，它确实运行良好。

这是Javascript：

window.onload = init;

function init() {        

    //populate the weather 
    addWeather();

    //refresh the page every hour
    setInterval(refreshPage(), 3600000);

}

//refresh the page information every hour 
function refreshPage(){
    //make new request to the webservice
    var req = new XMLHttpRequest();
    req.onload = addWeather();

}

//add the weather info from the weather service
function addWeather(){
    jQuery(document).ready(function($) {
              $.ajax({
                  url: "http://api.wunderground.com/api/6368023a57d122c7/geolookup/conditions/q/DominicanRepublic/Barahona.json",
                  dataType : "jsonp",
                  success : function(parsed_json) {
                      var location = parsed_json['location']['city'];
                      var temp = parsed_json['current_observation']['temp_c'];
                      var weather = parsed_json['current_observation']['weather'];
                      var humid = parsed_json['current_observation']['relative_humidity'];

                      var wind_direction = parsed_json['current_observation']['wind_dir'];
                      var wind_speed = parsed_json['current_observation']['wind_kph'];
                      var wind_string = wind_direction + " " + wind_speed + " Km/h";

                      document.getElementById("weather").innerHTML = "Weather " + weather;
                      document.getElementById("temp").innerHTML = "Tempurature " + temp + "°C";
                      document.getElementById("hum").innerHTML = "Humidity " + humid;
                      document.getElementById("wind").innerHTML = "Wind " + wind_string;                          
                  }
              });
    });
}
4

1 回答 1

0

从设置的间隔中删除（）。现在您正在通过 addWeather 传递返回值，并且您想要传递函数本身。所以：

    setInterval(addWeather,3600000)

如果您使用 XHR 请求数据，则可以使用 this.responseText。如果它是 JSON，你可以用它来解析它

    var r = JSON.parse(this.responseText)

里面加了天气功能，不是这样的。正确的 XHR：

    var r = new XMLHttpRequest();
    r.open('GET','your_url_here');
    r.onload = addWeather;
    r.send()

再次没有（）。将 () 放在函数的末尾执行它并使用返回值，只给出名称将分配函数本身，并且您希望变量 r.onload 等于您的函数。因为 xhr 检查 onload 属性并在它是函数时​​执行它

在此之后，您不需要 jQuery ajax 作为 XHR 的 API，并且您已经创建了请求，现在使用 responseText 读取值。所以：

修复 XHR，删除 jQajax 并将给定给 jQajax 函数的内容放入 addWeather.，所以 addWeather 看起来像：

    function addWeather(){
      var parsed_json=JSON.parse(this.responseText);

      var location = parsed_json['location']['city'];
      ... rest of this internal function ...

还请记住，解析的 JSON 将是一个对象，因此您可以使用

var location = parsed_json.location.city;

它应该更快

啊，改变 addWeather(); 在第一行（在设置间隔之前）刷新页面（）；作为 addWeather(); 现在将崩溃，因为它将手动执行，因此不会有this.responseText变量（因为它被称为“外部”xhr）

于 2013-11-07T23:54:33.970 回答