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

只需使用：

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 2

尝试重写你的成功处理程序：

success : handleData 

的AJAX方法的成功属性只需要一个对函数的引用。

在你handleData功能，您可能需要长达3个参数：

object data 
string textStatus 
jqXHR jqXHR 

Answer 3

我会写：

var dataFromServer; //declare the variable first 

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


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

Answer 4

你并不需要声明变量。 Ajax成功功能自动采用最多3个参数：Function(Object data, String textStatus, jqXHR jqXHR)

Answer 5

自从jQuery 1.5（2011年1月）以来，这样做的“新”方法是使用延迟对象而不是传递success回调。您应该返回的结果，然后使用.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 6

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

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

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

的handleData函数将被调用，并通过AJAX功能传递给它的参数回调。

Answer 7

几个小时后玩它，几乎变得沉闷。奇迹来到我身边，它工作。

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