Question

Hello其他程序员！我刚刚开始了一个额外的编程项目并向上帝发誓我的代码将比以前更清晰，更容易升级。

然后我偶然发现了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。您应该使用回调函数，我不知道如何使用。

如果有人可以使用回调函数给我写这些代码并向我解释它们是如何工作的，我会非常高兴。

编辑：

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

/ EDIT

诚恳，

Akke

Oy Aimo Latvala Ab的Web开发人员

Answer 1

回调只是在满足某些条件时运行的函数。在这种情况下，当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();
}

请注意，“返回”值不起作用。它只是停止回调函数，无论您是匿名函数还是命名函数。因此，您还必须编写名为someOtherFunction的第二个函数：

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

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

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

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

Answer 2

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

为函数提供回调函数参数。
调用回调函数而不是返回值。
返回值将作为参数传递给您的回调函数，而不是调用函数并使用其返回值执行某些操作。

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

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连接，如果您需要取消呼叫，附加额外的处理程序等，您可以使用它。

Answer 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 ，了解最常用的管理存储数据的方法。

这有帮助吗？

Answer 4

就像一个小小的兴趣点，你不必包括

async : true;

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

很抱歉将此作为回复发布，但在我有50个回复之前，我无法做出简单的评论。（随意帮我解决这个问题！^ _ ^）

jQuery Ajax回调如何工作？

4 个答案: