jQuery Ajax 回调是如何工作的？答案

【问题标题】：jQuery Ajax How do callbacks work?jQuery Ajax 回调是如何工作的？
【发布时间】：2012-01-22 21:27:44
【问题描述】：

各位程序员大家好！我刚刚开始了一个额外的编程项目，我向上帝发誓我的代码将比以前更干净，更容易升级。

然后我偶然发现了我的“主要敌人”jQuery AJAX 回归。上次我想从 AJAX 调用中返回一些东西时，我不得不弯腰并让调用同步。这让事情变得又粘又丑，我希望这次我能找到更好的东西。

所以我现在一直在谷歌搜索/搜索 stackoverflow，只是不明白许多人得到的这个解决方案，它被称为 回调函数。有人可以给我一个示例，说明如何利用这些 回调函数 来返回我的登录状态：

function doLogin(username, password) {
    $.ajax({
        url:        'jose.php?do=login&user='+username+'&pass='+password,
        dataType:   'json',
        success:    function(data) {
                        if(data.success==1) {
                            return('1');
                        } else {
                            return('2');
                        }
                        $('#spinner').hide();
                    },
        statusCode: {
                        403:function() {
                            LogStatus('Slavefile error: Forbidden. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        },
                        404:function() {
                            LogStatus('Slavefile was not found. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        },
                        500:function() {
                            LogStatus('Slavefile error: Internal server error. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        },
                        501:function() {
                            LogStatus('Slavefile error: Not implemented. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        }
                    },
        async:      true
    });
}

所以你可能知道，你不能像我在 AJAX 调用中那样使用return。您应该改用我不知道如何使用的 回调函数。

如果有人可以使用回调函数为我编写这段代码并向我解释它们是如何工作的，我将非常感激。

编辑：

我真的需要退回东西，而不是立即使用它。这个函数是从另一个函数中调用的，应该可以从不同的地方调用，而不需要稍微重写。

/编辑

此致，

阿克

Oy Aimo Latvala Ab 的网络开发人员

【问题讨论】：

您只是不能将异步Ajax 成功处理程序的值返回给启动Ajax 请求的代码。这就像试图在不下水的情况下游泳。
如果不更改代码和程序逻辑，您将无法支持回调和异步行为，更改可能非常广泛，事实就是如此。
感谢大家提供的信息。异步在这种情况下有点愚蠢。

标签： javascript jquery ajax callback return

【解决方案1】：

基本的“我需要一个异步回调”模式分为三个部分：

给函数一个回调函数参数。
调用回调函数而不是返回值。
返回值将作为参数传递给您的回调函数，而不是调用函数并对其返回值进行操作。

假设你的同步思维想要这样做：

function doLogin(username, password) {
    // ...
    return something;
}

switch(doLogin(u, p)) {
case '1':
    //...
    break;
case '2':
    //...
    break;
//...
}

但是doLogin 必须对远程服务器进行异步调用。你只需要像这样重新排列一些东西：

function doLogin(username, password, callback) {
    return $.ajax({
        // ...
        success: function(data) {
            if(data.success == 1)
                callback('1');
            else
                callback('2');
        },
        //...
    });
}

var jqxhr = doLogin(u, p, function(statusCode) {
    switch(statusCode)) {
    case '1':
        //...
        break;
    case '2':
        //...
        break;
    //...
    }
});

jqxhr 允许您在 AJAX 连接返回之前引用它，如果您需要取消调用、附加额外的处理程序等，您可以使用它。

【讨论】：

感谢您的信息。但是，当我们从服务器获取内容时，我现在正在执行此代码。不过信息量很大。

【解决方案2】：

回调只是一个在满足特定条件时运行的函数。在这种情况下，就是 ajax 有“成功”的时候。

您已经在使用回调，但您不认识它。 success: function(data) {} 是一个回调，但它只是所谓的匿名函数。它没有名称或引用，但它仍然运行。如果要把这个匿名函数改成命名函数，其实很简单：把匿名函数里面的代码，放到一个命名函数里面，然后调用这个命名函数即可：

[...]success:    function(data) {
    if(data.success==1) {
        return('1');
    } else {
        return('2');
    }
    $('#spinner').hide();
}, [...]

应该改为：

[...]success:    function(){ callbackThingy(data) }, [...]

现在只需创建callbackThingy 函数：

function callbackThingy(data){
    if(data.success==1) {
        someOtherFunction('1');
    } else {
        someOtherFunction('2');
    }
    $('#spinner').hide();
}

请注意，“return”值什么也不做。它只是停止回调函数，无论您是在匿名函数中还是在命名函数中。因此，您还必须编写一个名为someOtherFunction 的second 函数：

function someOtherFunction(inValue){
    if(inValue=='1') {
        // do something.
    } else if(inValue=='2') {
        // do something else.
    }
}

上面的例子是如果你必须传递参数。如果不需要传参数，设置更简单：

[...]success:  callbackThingy, [...]

function callbackThingy(){
    // do something here.
}

【讨论】：

感谢您告知这是如何工作的。我一开始就怀疑我错了，就来这里寻求帮助。显然我试图这样做是不可能的:(。好吧，只能使用 ajax 中的东西（与在另一个函数中使用的效果相同......）

【解决方案3】：

从您原始帖子的编辑中，我可以看到您只需要存储一个（更多）全局变量。试试这个：

// in the global scope , create this variable:
// (or -- at least -- in the scope available to both this ajax call 
// and where you are going to use it)
var valHolder = -1;

// then edit your ajax call like this:
[...] 
success:    function(data) {
    if(data.success==1) {
        valHolder = 1;
    } else {
        valHolder = 2;
    }
    $('#spinner').hide();
}, 
[...]

现在您可以验证 3 件事：

valHolder = -1表示ajax调用还没有成功返回

valHolder = 1 表示data.success = 1

valHolder = 2 表示data.success != 1。

另一种选择是将变量存储在某个元素的 HTML 属性中。

最后，您可能应该看看 jquery.data，了解管理存储数据的最 jquery 方式。

这有帮助吗？

【讨论】：

【解决方案4】：

作为一个小兴趣点，您不必包括

async : true;

作为 $.ajax 选项的一部分。 async 的默认设置已经是“true”。

很抱歉将其发布为回复，但在我有 50 个代表之前，我无法发表简单的评论。（请随时帮助我！^_^）

【讨论】：