无法似乎正确设置全局变量

Question

I am trying to store a token into a global var. When the alert is run it says null, but if I put 2 alerts one after the other the 1st shows null but the second shows the token.

Its like the token is not being set because the 1st alert is run before the ajax request has finished.

Does anyone have any ideas on what I am doing wrong?

var csrf_token = null;

$(document).ready(function(){
    get_csrf_token();
    alert('token 1 '+csrf_token);
    alert('token 2 '+csrf_token);
});

function get_csrf_token()
{
    $.ajax({
        type: "GET",
        url: "http://buscore/index.php/includes/csrf_token/",
        dataType: "json",
        success: function(resp, status) {
            if (resp.status != 'success')
            {
                alert('Error - Update CSRF Token\n\n' + resp.status);
                return;
            }

            csrf_token = resp.csrf_token;
        }
    });
}

Thanks

UPDATED

Ok thanks for your help everyone but still dont see how this would work. I use get_csrf_token() like jqgrid to send the token with the request like below. So how do I pass the token to and have it working?

beforeRequest: function (){
        get_csrf_token()
        //alert(csrf_token);
        $("#customer_grid").setPostDataItem('<?php echo $csrf_token_name; ?>', csrf_token);
    }

Answer 1

The success callback function runs when the HTTP response arrives.

In your test, the response is arriving between the time that the first alert is displayed and the time you click the button to let the script continue.

Do whatever you need to do with the data in the callback, not as the statement after the one where you initiate the Ajax request.

Example as requested by comment:

$(document).ready(function(){
    get_csrf_token();
});

function get_csrf_token()
{
    $.ajax({
        type: "GET",
        url: "http://buscore/index.php/includes/csrf_token/",
        dataType: "json",
        success: function(resp, status) {
            if (resp.status != 'success')
            {
                alert('Error - Update CSRF Token\n\n' + resp.status);
                return;
            }

            alert('token 1 '+csrf_token);
            alert('token 2 '+csrf_token);
        }
    });
}

Answer 2

The AJAX request is async. That means the script doesn't wait for it to finish. When the first alert fires the token is not set. But until you hit OK it has time to load and the token will be set.

Here's the order of the operations:

1. call get_csrf_token
2. make token request
3. show alert 1
4. finish request and set csrf_token
5. client hits OK on the first alert
6. show alert 2 (the token variable was set at 4.)

Answer 3

The A in AJAX stands for 'asynchronous'. While you are busy clicking on the first alert, the AJAX request is going through and the value is filled. You will need to place all code that needs the variable csrf_token into your callback function. Alternatively, you can look into using jQuery 1.5 or above (if you aren't already). It has so-called Deferred Objects

This API allows you to work with return values that may not be immediately present (such as the return result from an asynchronous Ajax request).

You can also set the async value on your post request to false , like this:

$.ajax({
    type: "GET",
    async: false,
    url: "http://buscore/index.php/includes/csrf_token/",
    dataType: "json",
    success: function(resp, status) {
        if (resp.status != 'success')
        {
            alert('Error - Update CSRF Token\n\n' + resp.status);
            return;
        }

        csrf_token = resp.csrf_token;
    }
});

This will make the browser wait for the response before proceeding with the rest of your code. I wouldn't necessarily recommend it, but it should work.