JQuery 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
}
391447 次浏览

Just use:

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

The success property requires only a reference to a function, and passes the data as parameter to this function.

You can access your handleData function like this because of the way handleData is declared. JavaScript will parse your code for function declarations before running it, so you'll be able to use the function in code that's before the actual declaration. This is known as hoisting.

This doesn't count for functions declared like this, though:

var myfunction = function(){}

Those are only available when the interpreter passed them.

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

Try rewriting your success handler to:

success : handleData

The success property of the ajax method only requires a reference to a function.

In your handleData function you can take up to 3 parameters:

object data
string textStatus
jqXHR jqXHR

I would write :

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




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

You don't need to declare the variable. Ajax success function automatically takes up to 3 parameters: Function( Object data, String textStatus, jqXHR jqXHR )

The "new" way of doing this since jQuery 1.5 (Jan 2011) is to use deferred objects instead of passing a success callback. You should return the result of $.ajax and then use the .done, .fail etc methods to add the callbacks outside of the $.ajax call.

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


function handleData(data /* , textStatus, jqXHR */ ) {
alert(data);
//do some stuff
}


getData().done(handleData);

This decouples the callback handling from the AJAX handling, allows you to add multiple callbacks, failure callbacks, etc, all without ever needing to modify the original getData() function. Separating the AJAX functionality from the set of actions to be completed afterwards is a good thing!.

Deferreds also allow for much easier synchronisation of multiple asynchronous events, which you can't easily do just with success:

For example, I could add multiple callbacks, an error handler, and wait for a timer to elapse before continuing:

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

Other parts of jQuery use deferred objects too - you can synchronise jQuery animations with other async operations very easily with them.

I do not know why you are defining the parameter outside the script. That is unnecessary. Your callback function will be called with the return data as a parameter automatically. It is very possible to define your callback outside the sucess: i.e.

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


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

the handleData function will be called and the parameter passed to it by the ajax function.

after few hours play with it and nearly become dull. miracle came to me, it work.

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

In your component i.e angular JS code:

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