jQuery AJAX: return value on success

Question

        function ChatServerQuery(data_json) {

        var result = null;

        $.ajax({
            url: 'chat/backend/',
            type: 'POST',
            data: data_json,
            success: function(json) {
                result = json
            }
        })

        return result

    }

My function that executes a request to the server. The problem is that I can not return received from the server text. I do not know how to take from an anonymous function (event success) to ChatServerQuery (where you can easily get it back).

I answered something similar earlier: http://stackoverflow.com/questions/9054897/why-cant-change-the-value-from-inside-jquery-post-function-javascript/9054910 — James M, Jan 29 '12 at 19:01
@JamesMcLaughlin That is my function completes before start the event? If I disable asynchronous, then it will work? — Ticksy, Jan 29 '12 at 19:04
Yes, but that's the wrong approach (disabling `async` _will_ cause problems). You should understand that the data isn't available until your callback is executed, and write your code accordingly. — James M, Jan 29 '12 at 19:06
@JamesMcLaughlin The only problem is that I need to change the logic of the code? — Ticksy, Jan 29 '12 at 19:12

dfsq · Accepted Answer · 2014-05-19T15:36:10.757

You'd better change your approach to reflect an asynchronous nature of AJAX request.

Using callback function

function ChatServerQuery(data, callback) {
    $.ajax({
        url:  'chat/backend/',
        type: 'POST',
        data: data,
        success: callback
    });
}

Then you would use it:

ChatServerQuery(dataObject, function(data) {
    // work with your data came from server
});

Using promise object

$.fn.ajax returns object implementing Promise iterface, so you can use it like this:

function ChatServerQuery(data) {
    return $.ajax({
        url:  'chat/backend/',
        type: 'POST',
        data: data
    });
}

ChatServerQuery(dataObject).done(function(data) {
    // work with your data came from server
});

This option offers you more flexibility.

That's more like it! Upvoted for not suggesting `async: false` :-) — James M, Jan 29 '12 at 19:09

score 1 · Answer 2 · edited May 23 '17 at 11:58

1

I answered something similar earlier:

Why can't change the value from inside Jquery $.post function (JavaScript)

Your function returns result long before the AJAX callback executes. Anything that depends on the result of the request has to happen in or after the callback.

edited May 23 '17 at 11:58

Community

1
1

answered Jan 29 '12 at 19:04

James M

18,506
3
48
56

score 0 · Answer 3 · answered May 22 '14 at 10:10

0

function ChatServerQuery(url,data) {

return $.ajax({ type: "POST",
    url: url,
    data: data,
    async:false,
    success: function(status){
    }
}).responseText;

}

//Now you will get the response text from server side via ajax call

answered May 22 '14 at 10:10

Krishna

9
3

clime · Answer 4 · 2012-01-29T19:12:52.890

0

Instead of trying to assign json to result in the success handler, do your logic there (or in functions called from it). Or if you need to wait for the response, follow the other comments.

edited Jan 29 '12 at 19:12

answered Jan 29 '12 at 19:05

clime

8,695
10
61
82

score -2 · Answer 5 · answered Jan 29 '12 at 19:01

-2

The request needs to be synchronous to work in this way.

Add async: false to the parameters object of the ajax() method.

answered Jan 29 '12 at 19:01

Ricardo Souza

16,030
6
37
69

1

You mean synchronous. It's because it's asynchronous that it doesn't work. – Guffa Jan 29 '12 at 19:02
Yeah, you're right. corrected my answer. A little confusion on type. – Ricardo Souza Jan 29 '12 at 19:03
People loves to downvote simple solutions. Instead of presenting real good solutions, if any in mind. – Ricardo Souza Jan 29 '12 at 19:06

jQuery AJAX: return value on success

5 Answers5

Using callback function

Using promise object

Linked

Related