jQuery ajax成功callback函数定义

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

我想把成功的callback函数定义放在.ajax()块之外,如下所示。 那么我需要像下面这样声明variablesdataFromServer ,以便我能够使用成功callback中返回的数据吗?

我见过大多数人在.ajax()块中定义成功callback。 那么下面的代码是否正确,如果我想定义外部成功callback?

 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 } 

只要使用:

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

success属性只需要引用一个函数,并将数据作为parameter passing给该函数。

你可以像这样访问你的handleData函数,因为handleData被声明了。 在运行之前,JavaScript会parsing函数声明的代码,所以你可以在实际声明之前的代码中使用这个函数。 这就是所谓的吊装 。

但是这并不代表这样的function:

 var myfunction = function(){} 

这些只有在口译员通过他们时才可用。

有关这两种声明函数的更多信息,请参阅此问题

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

 function getData() { return $.ajax({ url : 'example.com', type: 'GET' }); } function handleData(data /* , textStatus, jqXHR */ ) { alert(data); //do some stuff } getData().done(handleData); 

AJAX处理的callback处理分离出来,允许您添加多个callback,失败callback等,而不需要修改原始的getData()函数。 将AJAXfunction与将要完成的一系列操作分离是一件好事!

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

例如,我可以添加多个callback,一个error handling程序,然后等待一个计时器,然后再继续:

 // 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的其他部分也使用延迟对象 – 您可以很容易地与其他asynchronous操作同步jQueryanimation。

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

 function getData() { $.ajax({ url : 'example.com', type: 'GET', success : handleData }) } function handleData(data) { alert(data); //do some stuff } 

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

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

 success : handleData 

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

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

 object data string textStatus jqXHR jqXHR 

我会写:

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

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

在下面的链接中查看页面源可能会有所帮助。

http://mintnet.net/cas242/final_project/ajax-global-variable-test.html

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

你不需要声明variables。 Ajax成功函数自动获取3个参数: Function( Object data, String textStatus, jqXHR jqXHR )