jQuery ajax成功回调函数定义

Question

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

我希望将成功回调函数定义放在.ajax()块外面，如下所示。那么我需要像下面这样声明变量dataFromServer吗，以便我能够从成功回调中使用返回的数据？

我看到大多数人将成功回调定义在.ajax()块内部。如果我想在外部定义成功回调，那么以下代码是否正确？

结果：

我想使用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
}

- tonga

Answer 1

自2011年1月jQuery 1.5版以来，进行此操作的“新”方式是使用延迟对象而不是传递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功能与之后要完成的一系列操作分离是一件好事情！

Deferreds还允许更轻松地同步多个异步事件，而只使用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动画与其他异步操作同步。

- Alnitak

---

@Cerbrus 请看一下新的示例，然后考虑如何在不使用延迟对象的情况下完成它。 - Alnitak

@jbl 延迟对象非常棒。我“通常”会对任何推崇使用 success: 的答案进行反对投票，因为延迟对象的效果要好得多。 - Alnitak

@Cerbrus，这正是它应该被解释的方式。建议您在此处搜索“user:6782 deferred”以获取更多示例。 - Alnitak

如何在表单提交事件中使用它？ - haakym

那个 alert ... 我个人会使用 console.log(data) 或者如果它是一个数组：console.table(data) :) - Armstrongest

Answer 2

只需使用：

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

success属性只需要一个指向函数的引用，然后将数据作为参数传递给该函数。

你可以像这样访问handleData函数，因为它的声明方式。JavaScript会在运行代码之前解析函数声明，所以你可以在实际声明之前的代码中使用该函数。这被称为提升。

不过，对于像这样声明的函数，这并不起作用:

var myfunction = function(){}

只有在解释器通过它们时才可用。

关于声明函数的两种方式，可以参考这个问题获取更多信息

- Cerbrus

---

@Alnitak，deferred objects是什么时候引入的？我以前没见过。而且，它似乎有点混乱，因为定义回调函数的代码与实际的AJAX调用不在同一位置。 - Cerbrus

它是在 jQuery 1.5 版本中引入的，与使用 success: 相比，它要简洁得多。将回调函数与 AJAX 分离是一件好事！请查看我刚刚添加到答案末尾的注释。 - Alnitak

@Alnitak，我会看一下。让我们看看能否说服我 :P - Cerbrus

@Alnitak: 延迟对象是否总是优先于成功回调？谢谢。 - tonga

在我看来，是的，非常推荐。例如，如果您的代码一直在使用 $.get()，那么添加一个 error: 处理程序将是不可能的，因为 $.get 不支持它。但是，您可以向 $.get 的延迟结果添加 .fail。 - Alnitak

Answer 3

我不知道你为什么要在脚本外定义参数，这是不必要的。你的回调函数将自动以返回数据作为参数被调用。完全可以在success:外面定义你的回调函数。

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

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

ajax函数将调用handleData函数，并将参数传递给它。

- BinaryTox1n

Answer 4

尝试重新编写成功处理程序：

success : handleData

ajax方法的success属性只需要一个函数引用即可。在你的handleData函数中，你可以使用最多三个参数：

object data
string textStatus
jqXHR jqXHR

- Undefined

Answer 5

我会这样写：

我会写：

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


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

- jbl

---

你的代码实际上从未使用 dataFromServer，所以第一行可以删除。 - Anthony Grist

Answer 6

在玩了几个小时后，我几乎变得无聊。奇迹降临了，它开始工作了。

<pre>


var listname = [];   


 $.ajax({
    url : wedding, // change to your local url, this not work with absolute url
    success: function (data) {
       callback(data);
    }
});

function callback(data) {
      $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
             //   $('#displayImage1').append( "<img src='" + wedding + val +"'>" );
                 listname.push(val);
            } 
        });
}

function myfunction() {

alert (listname);

}

</pre>

- Võ Minh

---

你不需要为成功再调用另一个函数。你可以直接使用 success: callback 来触发 jQuery 中名为 callback 的函数，并将 data 参数传递给它。 - Olgun Kaya

Answer 7

您不需要声明变量。Ajax成功函数会自动接收最多3个参数：Function( Object data, String textStatus, jqXHR jqXHR )

- Lukas Bijaminas

---

不知怎么的，我找了一会儿才找到那些默认参数。谢谢！ - payne

Answer 8

在你的组件中，即Angular JS代码：

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}

- Shivani Jadhav