使用Ajax的Javascript回调函数

Question

我正在编写一个通用函数，将在脚本中的多个位置重复使用。

该函数使用ajax（使用jQuery库），因此我希望以某种方式将一个函数（或代码行）传递到该函数中，在ajax完成时执行。 我认为这需要一个回调函数，但是在阅读了一些回调答案后，我仍然对如何在我的情况下实现有点困惑。

我的当前函数是：

function getNewENumber(parentENumber){

        $.ajax({
               type: "POST",
               url: "get_new_e_number.php",
               data: {project_number: projectNumber, parent_number: parentENumber},
               success: function(returnValue){
                    console.log(returnValue);
                    return returnValue; //with return value excecute code

                },
                error: function(request,error) {
                    alert('An error occurred attempting to get new e-number');
                    // console.log(request, error);
                }
        });
    }

使用这个功能，我希望能以与其他jQuery函数相同的方式执行某些操作；

var parentENumber = E1-3;

getNewENumber(parentENumber, function(){
    alert(//the number that is returned by getNewENumber);
});

- Zak Henry

---

我想，这样做不可能（或者至少非常困难）。你应该交换函数。 - kirilloid

Answer 1

只需为函数给getNewENumber添加另一个参数，并将其用作回调即可。

   // receive a function -----------------v
function getNewENumber( parentENumber, cb_func ){

    $.ajax({
           type: "POST",
           url: "get_new_e_number.php",
           data: {project_number: projectNumber, parent_number: parentENumber},

             // ------v-------use it as the callback function
           success: cb_func,
            error: function(request,error) {
                alert('An error occurred attempting to get new e-number');
                // console.log(request, error);
            }
    });
}

var parentENumber = E1-3;

getNewENumber(parentENumber, function( returnValue ){
    alert( returnValue );
});

- user113716

---

太好了。我知道这一定是一些简单的东西。当它放在你自己的上下文中时，学习总是更容易的。谢谢。 - Zak Henry

Answer 2

@patrick dw的回答 是正确的。但是，如果您希望始终调用console.log（或任何其他操作），无论调用方代码函数执行什么操作，则可以在已有的成功函数中添加回调（您的新参数）：

function getNewENumber(parentENumber, cb_func /* <--new param is here*/){ 

    $.ajax({
           type: "POST",
           url: "get_new_e_number.php",
           data: {project_number: projectNumber, parent_number: parentENumber},
           success: function(returnValue){
                console.log(returnValue);
                cb_func(returnValue); // cb_func is called when returnValue is ready.
            },
            error: function(request,error) {
                alert('An error occurred attempting to get new e-number');
                // console.log(request, error);
            }
    });
}

调用代码与您的相同，只是该函数将通过参数接收returnValue：

var parentENumber = E1-3;

getNewENumber(parentENumber, function(val /* <--new param is here*/){
    alert(val);
});

- Mariano Desanze

---

是的，当我在我的代码中实现它时，我确实想知道如果我想要其他成功操作该怎么做。谢谢。 - Zak Henry

Answer 3

使用jQuery的Deferred Objects会更好。让你的AJAX调用返回jqXHR对象。

function getNewENumber(parentENumber) {
    return $.ajax( { ... } );
}

getNewENumber(E1 - 3).then(success_callback, error_callback);

如果你想在函数内保留错误回调，你可以在那里注册它：

function getNewENumber(parentENumber) {
    var jqXHR = $.ajax( { ... } );
    jqXHR.fail( ... );
    return jqXHR;
}

getNewENumber(E1 - 3).done(success_callback);

- Alnitak