jQuery ajax()在成功时将json对象返回给另一个函数会导致错误

Question

我在这个问题上遇到了一个小时.我在想这与变量范围有关吗？无论如何,这是代码:

function loadRoutes(from_city)
{
$.ajax(
{
    url: './ajax/loadRoutes.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType: 'json',
    data    :
    {
        "from_city" : from_city
    },
    error   : function(data)
    {
        console.log('error occured when trying to load routes');
    },
    success : function(data) 
    {
        console.log('routes loaded successfully.');
        $('#upperright').html("");  //reset upperright box to display nothing.

        return data;    //this line ruins all

        //this section works just fine.
        $.each(data.feedback, function(i, route)
        {
            console.log("route no. :" + i + " to_city : " + route.to_city + " price :" + route.price);
            doSomethingHere(i);             
        });
    }
});

}

每个部分在成功回调区域内工作得很好.我可以看到Firebug控制台输出路径ID完全没有问题.

为了解耦目的,我认为最好只将JSON格式的数据对象返回给调用函数中的变量,如下所示:

//ajax load function
function findFromCity(continent, x, y)
{
console.log("clicked on " + continent + ' ' + x + ',' + y);

$.ajax(
{
    url: './ajax/findFromCity.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType : 'json',
    data    :
    {
        "continent" : continent,
        "x"         : x,
        "y"         : y
    },
    error   : function(data)
    {
        console.log('error occured when trying to find the from city');
    },
    success : function(data) 
    {
        var cityname = data.from_city;

        //only query database if cityname was found
        if(cityname != 'undefined' && cityname != 'nowhere')     
        {
            console.log('from city found : ' + cityname);

            data = loadRoutes(cityname);

            console.log(data);
        }
    }
});
} 

然后突然间,一切都停止了!Firebug控制台将数据对象报告为"未定义"...还没有由方法loadRoutes(cityname)中的返回对象分配？

对不起,我对javascript的整体了解非常有限,所以现在我就像一个"模仿",以业余的方式处理我的代码.

编辑:看过尼克的暗示,让我现在就开始研究它,看看它是怎么回事.

编辑第2期:

忍受我,仍然坚持这个:

//ajax load function
function findFromCity(continent, x, y)
{
console.log("clicked on " + continent + ' ' + x + ',' + y);

var cityname = "nowhere";   //variable initialized.

$.ajax(
{
    url: './ajax/findFromCity.php',
    async   : true,
    cache   : false,
    timeout : 10000,
    type    : "POST",
    dataType : 'json',
    data    :
    {
        "continent" : continent,
        "x"         : x,
        "y"         : y
    },
    error   : function(data)
    {
        console.log('error occured when trying to find the from city');
    },
    success : function(data) 
    {
        cityname = data.from_city;

        //only query database if cityname was found
        if(cityname != 'undefined' && cityname != 'nowhere')     
        {
            console.log('from city found : ' + cityname);

            //data = loadRoutes(cityname);

            //console.log(data);
        }
    }
});

return cityname;  //return after ajax call finished.
} 

Firebug控制台打印出一些有趣的东西:

nowhere
from city found : Sydney

我认为订单至少应该像这样颠倒:

from city found : Sydney
nowhere

那么,基本上,成功区域中定义的变量与外部相同变量的范围完全不同？这听起来对我来说很奇怪,但现在我看到了.

不过,不知道如何将json对象传递给成功回调以将其分配给另一个变量......

结论:好的,我得到了它,正在研究"通过引用传递"来利用副作用来改变现在由函数参数传递的变量......这与这个问题没有直接关系.

Answer 1

在successAjax调用完成后出现回调,所以没有什么实际上是由你的函数返回,因为这种说法没有,直到后来运行.

在AJAX场景中,您需要获取数据对象,然后调用接下来应该运行的内容,因为任何success或complete回调函数将在您运行的代码之后,当服务器的响应返回时发生.

Answer 2

你可以试试这个方法:

function loadRoutes(parameters)
{
    return $.ajax({
        type: "GET",
        async: false,  // This is important... please see ref below

        // Other Settings (don't forget the trailing comma after last setting)

        success: function () {
            console.log('Success');
        },
        error: function () {
            console.log('Error');
        }
    }).responseText;
}

所以基本上,'.responseseText'被添加到'$ .ajax'请求中,然后请求本身就成为返回值.

请注意:此用法 - 将调用结果返回到变量 - 需要同步(阻塞)请求.因此,请在设置中使用"async:false".

要返回JSON值,您可以使用:

return $.parseJSON($.ajax({
    // Other settings here...
}).responseText);

有关详情,请参阅: http://api.jquery.com/jQuery.ajax.