jQuery ajax成功回调函数定义

Question

我想使用jQuery ajax从服务器检索数据.

我想将成功回调函数定义放在.ajax()块之外,如下所示.那么我需要声明变量dataFromServer如下所示,以便我能够使用成功回调中返回的数据吗？

我见过大多数人在.ajax()块内定义成功回调.如果我想在外面定义成功回调,那么以下代码是否正确？

var dataFromServer;  //declare the variable first

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData(dataFromServer)
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

Answer 1

自jQuery 1.5(2011年1月)以来这样做的"新"方法是使用延迟对象而不是传递success回调.您应该返回的结果$.ajax,然后使用.done,.fail等方法来添加回调的外部$.ajax调用.

function getData() {
    return $.ajax({
        url : 'example.com',
        type: 'GET'
    });
}

function handleData(data /* , textStatus, jqXHR */ ) {
    alert(data);
    //do some stuff
}

getData().done(handleData);

这将回调处理与AJAX处理分离,允许您添加多个回调,故障回调等,而无需修改原始getData()函数.将AJAX功能与之后要完成的操作集分开是一件好事!.

延迟还允许更容易同步多个异步事件,这是您不能轻易做到的 success:

例如,我可以添加多个回调,一个错误处理程序,并在继续之前等待计时器过去:

// a trivial timer, just for demo purposes -
// it resolves itself after 5 seconds
var timer = $.Deferred();
setTimeout(timer.resolve, 5000);

// add a done handler _and_ an `error:` handler, even though `getData`
// didn't directly expose that functionality
var ajax = getData().done(handleData).fail(error);

$.when(timer, ajax).done(function() {
    // this won't be called until *both* the AJAX and the 5s timer have finished
});

ajax.done(function(data) {
    // you can add additional callbacks too, even if the AJAX call
    // already finished
});

jQuery的其他部分也使用延迟对象 - 您可以非常轻松地将jQuery动画与其他异步操作同步.

Answer 2

只需使用:

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

该success属性仅需要对函数的引用,并将数据作为参数传递给此函数.

handleData由于handleData声明的方式,您可以像这样访问您的函数.JavaScript将在运行之前解析代码以获取函数声明,因此您将能够在实际声明之前的代码中使用该函数.这被称为吊装.

但是,这不会计入这样声明的函数:

var myfunction = function(){}

这些仅在口译员通过时才可用.

有关声明函数的两种方法的详细信息,请参阅此问题

Answer 3

我不知道你为什么要在脚本之外定义参数.这是不必要的.将使用返回数据作为参数自动调用您的回调函数.很有可能在sucess:ie 之外定义你的回调

function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}

function handleData(data) {
    alert(data);
    //do some stuff
}

将调用handleData函数并通过ajax函数将参数传递给它.

Answer 4

尝试将您的成功处理程序重写为:

success : handleData

ajax方法的success属性只需要引用一个函数.

在handleData函数中,您最多可以使用3个参数:

object data
string textStatus
jqXHR jqXHR

Answer 5

我会写：

var handleData = function (data) {
    alert(data);
    //do some stuff
}


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}