如何使用 Ajax 创建回调函数？答案

【问题标题】：How to create callback function using Ajax?如何使用 Ajax 创建回调函数？
【发布时间】：2019-10-01 22:35:58
【问题描述】：

我正在使用 jquery 调用一个函数来获取我想要在刷新页面时为变量 email_number 存储的返回值。

当我尝试这个时：

function get_emailno(emailid, mailfolder) {

    $.ajax({
        url: 'getemailnumber.php',
        type: 'POST',

        data : {
            emailid: emailid,
            mailfolder: mailfolder
        },

        success: function(data)
        {
            email_number = data;
        }
    });
    return email_number;
}

只有当我在email_number = data; 之后使用alert(email_number) 时，我才会得到6 的返回值，但我无法在函数之外获取该值。

这里是完整的代码：

var email_number = '';

// check if page refreshed or reloaded
if (performance.navigation.type == 1) {
    var hash    = window.location.hash;
    var mailfolder = hash.split('/')[0].replace('#', '');
    var emailid = 'SUJmaWg4RTFRQkViS1RlUzV3K1NPdz09';
    get_emailno(emailid, mailfolder);
}

function get_emailno(emailid, mailfolder) {

    $.ajax({
        url: 'getemailnumber.php',
        type: 'POST',

        data : {
            emailid: emailid,
            mailfolder: mailfolder
        },

        success: function(data)
        {
            email_number = data;
        }
    });
    return email_number;
}

但是，我一直在研究，它说我需要通过 ajax 使用回调，但我不知道如何做到这一点。

我已经尝试过了，但在get_emailno 函数之外我仍然没有得到返回值。

    $.ajax({
        url: 'getemailnumber.php',
        type: 'POST',
        async: true,

        data : {
            emailid: emailid,
            mailfolder: mailfolder
        },

        success: function(data)
        {
            email_number = data;
        }
    });

由于找不到解决方案，我感到很沮丧，因此我需要您的帮助。我想要做的是我想调用get_emailno 函数来获取返回值以存储在email_number 变量中。

你能告诉我一个例子，我如何在 ajax 上使用回调函数来获取返回值，我可以将值存储在 email_number 变量中？

谢谢。

【问题讨论】：

我们刚刚结束了这个问题。不要再次发布相同的问题。阅读我们在您发布的最后一个问题中提供的链接。 stackoverflow.com/questions/14220321/…
@ScottMarcus 不，这是一个不同的问题，所以请仔细检查我的问题。
@chrisoojer，这几乎是同一个问题。但是，为了给您一些快速帮助，您研究的回调是指success、error 和complete 回调。您的代码中已经有 success 回调
UdoE 感谢您的建议。那么什么回调最适合我使用呢？是complete 回调吗？
@chrisoojer，看看我的回答。

标签： javascript jquery ajax

【解决方案1】：

从jquery documentation，$.ajax() 方法返回一个jqXHR 对象（这完全读作jquery XMLHttpRequest 对象）。

当你在像这样的另一个函数中从服务器返回数据时

function get_emailno(emailid, mailfolder) {

    $.ajax({ 
        // ajax settings
    });
    return email_number;
}

请注意，$.ajax ({...}) 调用是异步的。因此，其中的代码不一定会在最后一个 return 语句之前执行。换句话说，$.ajax () 调用被延迟在将来的某个时间执行，而 return 语句立即执行。

因此，jquery 指定您使用回调和 not 返回语句来处理（或响应）ajax 请求的执行。

有两种方法可以定义回调。

1. 在 jquery ajax 请求设置中定义它们，如下所示：

$.ajax({ 
    // other ajax settings 
    success: function(data) {},
    error: function() {},
    complete: function() {},
});

2. 或者将回调链接到返回的 jqXHR 对象，如下所示：

$.ajax({ 
    // other ajax settings 
}).done(function(data) {}).fail(function() {}).always(function() {});

这两种方法是等价的。 success: 等价于done()，error: 等价于fail()，complete: 等价于always()。

在适合使用哪个函数时开启：使用success:处理返回数据是你期望的情况；如果请求期间出现问题，请使用error:，并在请求完成时最终使用complete:（无论是否成功）。

有了这些知识，您可以更好地编写代码来捕捉在正确的时间从服务器返回的数据。

var email_number = '';

// check if page refreshed or reloaded
if (performance.navigation.type == 1) {
    var hash    = window.location.hash;
    var mailfolder = hash.split('/')[0].replace('#', '');
    var emailid = 'SUJmaWg4RTFRQkViS1RlUzV3K1NPdz09';
    get_emailno(emailid, mailfolder);
}

function get_emailno(emailid, mailfolder) {

    $.ajax({
        url: 'getemailnumber.php',
        type: 'POST',

        data : {
            emailid: emailid,
            mailfolder: mailfolder
        },

        success: function(data)
        {
            // sufficient to get returned data
            email_number = data;

            // use email_number here
            alert(email_number); // alert it
            console.log(email_number); // or log it
            $('body').html(email_number); // or append to DOM
        }
    });
}

【讨论】：