Ajax result in alert()

Question

How can I get imageX show it's value when used outside of $.ajax()?

var imageX;
$.ajax({
    type: 'GET',
    url: 'php/my1.php',
    dataType: 'json',
    async: 'false',
    success: function(response){
        imageX = response[0].studentName,
        groupX = response[0].subjectId;
    }
});
alert(imageX);

Using `async: false` is not a good design as the site will stop responding (freeze) until the call has returned *(they are occasions this may be a good idea but I don't personally know of them)*. This means if there is an issue on the server and the call times out of even worse the server never returns at all your users will look at a web page which is unresponsive for a long time. You can use triggers, methods or `.then .when` instead to ensure you process `imageX` when the call is done as required but also not freeze the client. — Nope, Feb 20 '14 at 09:19

Ravikumar Sharma · Accepted Answer · 2014-02-20T09:18:11.723

7

Change

async: 'false',

to

async: false,

'false' is string which is cast to true by Jquery(JS).

Jquery Ajax Documentation says async accept boolean value.

async (default: true): Type: Boolean By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false.

https://api.jquery.com/jQuery.ajax/

async:false will cause the jQuery.ajax() call to block until it returns. instead of this:

function your ajax_calling_function
    call your ajax 
    callback with results

edited Feb 20 '14 at 09:18

answered Feb 20 '14 at 09:10

Ravikumar Sharma

3,678
5
36
59

1

It might be very helpful to the OP to explain *why*. – Felix Kling Feb 20 '14 at 09:14
sure let me edit answer – Ravikumar Sharma Feb 20 '14 at 09:14
2

Or why this approach is a bad idea to begin with. – Benjamin Gruenbaum Feb 20 '14 at 09:16
1

Thanks Ravi... well explained... – NathaliaZeed Feb 20 '14 at 09:22

score 2 · Answer 2 · answered Feb 20 '14 at 09:15

2

You need to set async: false (type Boolean).

If you wrap the false keyword with ', Javascript consider this is a string. And jQuery consider the async property setted as true

answered Feb 20 '14 at 09:15

Paul Rad

4,820
1
22
23

score 0 · Answer 3 · edited May 23 '17 at 12:28

Actually set async: false is a bad approach, quote from this answer:

It is generally a bad idea to make AJAX calls synchronous. DON'T DO IT. I'm serious. I only mention it here for the sake of completeness. Why is it bad do you ask?

JavaScript runs in the UI thread of the browser and any long running process will lock the UI, making it unresponsive. Additionally, there is an upper limit on the execution time for JavaScript and the browser will ask the user whether to continue the execution or not. All of this is really bad user experience. The user won't be able to tell whether everything is working fine or not. Furthermore the effect will be worse for users with a slow connection.

One way is to rewrite your code to:

function getImage() {
    var imageX;
    $.ajax({
        type: 'GET',
        url: 'php/my1.php',
        dataType: 'json',
        success: function(response){
            imageX = response[0].studentName,
            groupX = response[0].subjectId;
        }
     });
     return imageX;
}

then you can pass it to a variable:

var result = getImage();

and get the data that is returned by the AJAX call like this:

result.success(function (data) {
    alert(data);
});

Ajax result in alert()

3 Answers3