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

Question

当我刷新页面时，我正在使用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;
}

[仅当在6之后使用alert(email_number)时，我将获得作为email_number = data;的返回值，但是我无法在函数外部获取该值。

这里是完整代码：

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变量中？

谢谢。

Answer 1

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

当您通过类似这样的其他功能从服务器返回数据时

function get_emailno(emailid, mailfolder) {

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

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

因此，jquery指定您使用回调和not return语句来处理（或响应）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:（无论请求是否成功）。

基于此知识，您可以更好地将代码编写为catch在正确的时间从服务器返回的数据。

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
        }
    });
}