95

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

8 回答 8

202

自 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 功能与之后要完成的操作集分开是一件好事！.

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 动画与其他异步操作同步。

于 2013-02-07T15:22:59.307 回答
95

只需使用：

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

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

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

但是，这不包括像这样声明的函数：

var myfunction = function(){}

这些仅在口译员通过它们时可用。

有关声明函数的 2 种方式的更多信息，请参阅此问题

于 2013-02-07T15:21:28.797 回答
15

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

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

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

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

于 2013-02-07T16:00:14.670 回答
6

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

success : handleData

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

在您的 handleData 函数中，您最多可以使用 3 个参数：

object data
string textStatus
jqXHR jqXHR
于 2013-02-07T15:22:05.287 回答
5

我会写：

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


function getData() {
    $.ajax({
        url : 'example.com',
        type: 'GET',
        success : handleData
    })
}
于 2013-02-07T15:22:22.503 回答
2

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

于 2013-02-07T15:22:31.040 回答
2

几个小时后玩它，几乎变得沉闷。奇迹出现在我身上，它起作用了。

<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>
于 2016-08-21T05:34:56.160 回答
-1

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

function getData(){
    window.location.href = 'http://localhost:1036/api/Employee/GetExcelData';
}
于 2018-06-05T09:30:04.187 回答