jQuery ajax success callback function definition

Question

I want to use jQuery ajax to retrieve data from a server.

I want to put the success callback function definition outside the .ajax() block like the following. So do I need to declare the variable dataFromServer like the following so that I will be able to use the returned data from the success callback?

I've seen most people define the success callback inside the .ajax() block. So is the following code correct if I want to define the success callback outside?

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
}

score 204 · Answer 1 · edited Mar 31 '22 at 23:29

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.

@Cerbrus see the new example, and then consider how you'd do it _without_ deferred objects — Alnitak, Feb 07 '13 at 15:36
@jbl deferred objects are fantastic. I _normally_ downvote any answer that promotes use of `success:` because deferreds just work so much better. — Alnitak, Feb 07 '13 at 15:38
@Cerbrus that's exactly how it's supposed to be interpreted. Suggest you search here for `user:6782 deferred` for _lots_ more examples. — Alnitak, Feb 07 '13 at 15:43
That `alert` though... I'd personally use `console.log(data)` or if it's an array: `console.table(data)` :) — Armstrongest, Mar 01 '18 at 17:57

score 96 · Accepted Answer · edited May 23 '17 at 12:03

96

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

edited May 23 '17 at 12:03

Community

1
1

answered Feb 07 '13 at 15:21

Cerbrus

70,800
18
132
147

1

@Alnitak, when did the `deferred objects` thing get introduced? I haven't seen it before. Also, it seems slightly messy, since the code that defines what callback to use is in a different location than the actual AJAX call. – Cerbrus Feb 07 '13 at 15:28
4

it was introduced in jQuery 1.5 and it's _far_ less messy than using `success:`. Decoupling the callback from the AJAX is a _good_ thing! See the notes I just added to the end of my answer. – Alnitak Feb 07 '13 at 15:29
@Alnitak, I'll have a look. Let's see if I can be convinced :P – Cerbrus Feb 07 '13 at 15:32
@Alnitak: Is deferred objects always preferred over success callback? Thanks. – tonga Feb 07 '13 at 15:43
@tonga IMHO, yes, very much preferred. If your code had been using `$.get()` for example, it would have been impossible to add an `error:` handler because `$.get` doesn't support it. However you _can_ add a `.fail` to the deferred _result_ of `$.get`. – Alnitak Feb 07 '13 at 15:46

score 15 · Answer 3 · answered Feb 07 '13 at 16:00

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.

score 6 · Answer 4 · answered Feb 07 '13 at 15:22

6

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

answered Feb 07 '13 at 15:22

Undefined

11,234
5
37
62

score 5 · Answer 5 · edited Feb 28 '19 at 01:46

5

I would write :

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


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

edited Feb 28 '19 at 01:46

jjonesdesign

410
2
14

answered Feb 07 '13 at 15:22

jbl

15,179
3
34
101

score 2 · Answer 6 · answered Feb 07 '13 at 15:22

2

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

answered Feb 07 '13 at 15:22

Lukas Bijaminas

176
3
12

Somehow had to look for a while to find those default parameters. Thanks! – payne Oct 14 '20 at 04:00

Võ Minh · Answer 7 · 2018-02-12T04:57:10.093

2

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>

edited Feb 12 '18 at 04:57

answered Aug 21 '16 at 05:34

Võ Minh

155
2
12

1

you do not need to put another function call for success. you can directly say `success : callback` jquery will trigger your function called `callback` with the `data` parameter in it. – Olgun Kaya Sep 06 '17 at 06:37

score -1 · Answer 8 · edited Jun 05 '18 at 09:47

-1

In your component i.e angular JS code:

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

edited Jun 05 '18 at 09:47

coudy.one

1,382
12
24

answered Jun 05 '18 at 09:30

Shivani Jadhav

1

jQuery ajax success callback function definition

8 Answers8

Linked

Related