Question

我正在尝试创建一个天气应用程序，向OpenWeatherMap发送Ajax请求。我在w.getWeatherFunc中遇到错误，当我给函数sendRequest w.weather的参数，然后给我的函数displayFunc提供相同的参数，我将调用它。

以下是我在控制台中的内容：

未捕获的TypeError：无法读取属性＆＃39;天气＆＃39;未定义的 at displayFunc（weather.js：46）在weather.js：78

如何解决此问题并使其有效？

function Weather () {
    var w = this;

    var weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?'; 
    var appid = '&appid=c0a7816b2acba9dbfb70977a1e537369';
    var googleUrl =  'https://maps.googleapis.com/maps/api/geocode/json?address=';
    var googleKey = '&key=AIzaSyBHBjF5lDpw2tSXVJ6A1ra-RKT90ek5bvQ';

    w.demo = document.getElementById('demo');
    w.place = document.getElementById('place');
    w.description = document.getElementById('description');
    w.temp = document.getElementById('temp');
    w.humidity = document.getElementById('humidity');
    w.getWeather = document.getElementById('getWeather');
    w.addCityBtn = document.getElementById('addCity');
    w.rmCityBtn = document.getElementById('rmCity');
    w.icon = document.getElementById('icon');
    w.wind = document.getElementById('wind');
    w.time = document.getElementById('time');
    w.lat = null;
    w.lon = null;
    w.cityArray = [];
    w.weather = null;

    function sendRequest (url, data) {

        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.send();

        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                    data = JSON.parse(request.responseText);
                    console.log(data);
                    return data;
            } else {
                console.log(request.status + ': ' + request.statusText);
            }
        }

    }

    function displayFunc (obj) {

        console.log('obj ' + obj);
        w.icon.src = 'http://openweathermap.org/img/w/' + obj.weather[0].icon + '.png';

        var timeNow = new Date();
        var hours = timeNow.getHours();
        var minutes = timeNow.getMinutes() < 10 ? '0' + timeNow.getMinutes() : timeNow.getMinutes();
        w.time.innerHTML = hours + ':' + minutes;

        w.place.innerHTML = 'Place: ' +  obj.name;
        w.description.innerHTML = "Weather: " + obj.weather[0].description;
        w.temp.innerHTML = "Temperature: " + w.convertToCels(obj.main.temp) + "°C";
        w.humidity.innerHTML = "Humidity: " + obj.main.humidity + '%';
        w.wind.innerHTML = 'Wind: ' + obj.wind.speed + ' meter/sec';
    }


    w.convertToCels = function(temp) {
        var tempC = Math.round(temp - 273.15);
        return tempC;
    }


    w.getWeatherFunc = function() {

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(location){
                w.lat = location.coords.latitude;
                w.lon = location.coords.longitude;

                var url = weatherUrl + 'lat=' + w.lat + '&lon=' + w.lon + appid;

                var result = sendRequest(url, w.weather);
                console.log(result);    
                displayFunc(result);
            });
        } else {
            alert('Browser could not find your current location');
        }
    }


    w.addCityBtn.onclick = function() {
        var newCity = prompt('Please insert city', 'Kiev');

        var gUrl = googleUrl + newCity + googleKey;
        var newCityWeather = null;
        sendRequest(url, newCityWeather);

        var location = newCityWeather.results[0].geometry.location;
        var newUrl = weatherUrl + 'lat=' + location.lat + '&lon=' + location.lng + appid;

        sendRequest(newUrl, w.weather);

            displayFunc(newCity);
            w.cityArray.push(newCity);
        }

    window.onload = w.getWeatherFunc;

    setInterval(function() {
        w.getWeatherFunc();
    }, 900000);

}

Answer 1

第一次将obj传递给函数时，它会将一个范围保存得更高。之后，如果你没有;传递你之前保存的那个对象。

var objBkp;
function displayFunc (obj) {
    if(undefined === obj) obj = objBkp;
    else objBkp = obj;
    // rest of code here
}

Answer 2

在你的sendRequest中，你只传递了w.weather的值，而不是它的参考值。 JavaScript不会按值或按引用传递变量，而是按sharing传递。因此，如果您想为变量赋值，则应在函数sendRequest中执行此操作：

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
        w.weather = JSON.parse(request.responseText);
        console.log(data);
        return data;
    } else  {
        console.log(request.status + ': ' + request.statusText);
    }
}

此外，如果您使用的是属性，则不必将它们作为参数传递给函数。除此之外，如果您还创建get()和set()

，那将是一件好事

Answer 3

console.log(result);中getWeatherFunc给你的是什么？我认为问题在于displayFunc传递的参数是未定义的。

Answer 4

您的ajax 返回会返回浏览器引擎。作为异步，您需要创建一个回调：

function sendRequest(url,data,callback){

 //if the data was received
 callback(data);
 }

像这样使用

sendRequest("yoururl",data,function(data){
displayFunc(data);
});

如何在函数调用之间保存参数值？

4 个答案: