ajax调用返回值但变量为null

时间:2014-10-29 07:53:59

标签: javascript jquery ajax

我正试图从here获取天气预报。这工作正常,我得到了我的价值。如果我做一个正常的ajax调用它工作正常。

但是:

function Weather() {
    var self = this,
        weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?id=',
        value = null;

    function getWeatherForCity(id) {
        $.ajax({
            url: weatherUrl + id,
            async: false,
            success: function (data) {
                console.log(data);
                value = data;
            }
        });
    }

    self.getWeatherForCity = function (id) {
        var cast = value;
        console.log(cast);
        return cast;

    };
}

电话:

        weather = new Weather();

        console.log(weather.getWeatherForCity('2878234'));

如果我通过这些函数调试,我在成功回调函数中获得了良好的结果,但是cast变量是null,就像它从未被触及过一样?

有人可以向我解释一下吗?

3 个答案:

答案 0 :(得分:2)

<强>问题即可。问题是你从不调用本地getWeatherForCity函数。所以它永远不会改变value变量。这应该解决它:

self.getWeatherForCity = function (id) {
    getWeatherForCity(id);
    return value;
};

更好的方法。看起来您知道使用async: false不是理想的解决方案。在这种情况下,我会建议你更好的选择。

function Weather() {

    var self = this,
        weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?id=';

    function getWeatherForCity(id) {
        return $.get(weatherUrl + id);
    }

    self.getWeatherForCity = function (id) {
        return getWeatherForCity(id);
    };
}

var weather = new Weather();
weather.getWeatherForCity('2878234').then(function(data) {
    console.log(data);
});

使用异步代码会在请求期间使UI不冻结。承诺的使用使代码更清晰,更全面。

答案 1 :(得分:1)

你有两个不同的getWeatherForCity()函数 - 一个是方法,一个是私有函数(在闭包内)。你永远不会调用私有函数,它实际上是在工作。

function Weather() {
    var self = this,
        weatherUrl = 'http://api.openweathermap.org/data/2.5/weather?id=',
        value = null;

    function getWeatherForCity(id) {
        $.ajax({
            url: weatherUrl + id,
            async: false,
            success: function (data) {
                console.log(data);
                value = data;
            }
        });
    }

    self.getWeatherForCity = function (id) {
        getWeatherForCity(id); // here
        var cast = value;
        console.log(cast);
        return cast;

    };
}

答案 2 :(得分:0)

您还可以查看$ .when方法,该方法在继续之前等待Ajax调用完成:

http://api.jquery.com/jquery.when/

你会这样使用它:

$.when(getWeatherForCity([pass the parameter here])).done(function(){
    // do stuff here after the method is finished
});

您还需要使用Ajax函数的返回值,如下所示:

return $.ajax({
        url: weatherUrl + id,
        async: false,
        success: function (data) {
            console.log(data);
            value = data;
        }
    });