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

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

Answer 2

只需使用：

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

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

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

但这并不算是这样声明的函数：

var myfunction = function(){}

只有在口译员通过时才能使用。

<强> See this question for more information about the 2 ways of declaring functions

Answer 3

我不知道为什么要在脚本之外定义参数。这是不必要的。将使用返回数据作为参数自动调用您的回调函数。可以在sucess:之外定义回调，即

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

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>

Answer 7

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

Answer 8

在你的组件中，即有角度的JS代码：

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

jQuery ajax成功回调函数定义

8 个答案: