使用jQuery $ .ajax进行Javascript范围查询

Question

I am trying to write simple function that checks to see if a designer name exists in the database. I am using jQuery's ajax function to try to do this:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    var designer_exists =  false;
    var temp = $.ajax( { type: "GET", 
             url: "/api/check_brand_exists/", 
             data : {name : designer_name }, 
             success: function(data) {
                    designer_exists = $.parseJSON(data);
                    return designer_exists;
                }}).statusText;
    return designer_exists;
}

I have read about javascript scoping, and but still can't seem to find my bug, which is checkDesignerName always returns false. Do I need to use a closure for this function to work correctly?

Thanks

Answer 1

It's the nature of AJAX which is asynchronous that you seem to have troubles with understanding.

At this stage:

return designer_exists;

your AJAX call hasn't yet finished. It's only inside the success callback, which happens much later, that you can use the results. You cannot have a function which returns some result and this result depends on an AJAX call. You can only exploit the results of an AJAX call iniside the success callback:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    $.ajax({ 
        type: "GET", 
        url: "/api/check_brand_exists/", 
        data : { name : designer_name }, 
        success: function(data) {
            var designer_exists = $.parseJSON(data);
            // Here and only here you know whether this designer exists
            alert(designer_exists);
        }
    });
}

You could of course perform a synchronous call to the server which is something totally not recommended as it will freeze the client browser and piss the user off your site during the AJAX request by setting the async: false flag:

function checkDesignerName(name)
{   
    var designer_name = $('input[name="name"]').val();
    var designer_exists = false;
    $.ajax({ 
        type: "GET", 
        url: "/api/check_brand_exists/", 
        async: false,
        data : { name : designer_name }, 
        success: function(data) {
            designer_exists = $.parseJSON(data);
        }
    });
    return designer_exists;
}

I am mentioning this just for completeness of the answer, not as something that you should ever be doing.

Now because it seems that you are doing some kind of validation logic here, here's what I would recommend you as an ultimate solution: the jquery.validate plugin . It has this great remote rule support that will do exactly what you need here.

Answer 2

$.ajax is a async call. It means the statement return designer_exists gets executed even before success function is executed. That is the reason it always returns false.

Answer 3

1. your success function don't see designer_exists variable
2. return action runs before success function will run

You may run sync request or redesign code to callbacks logic.

For sync request your code will be:

var designer_exists =  false;
function checkDesignerName(name)
{   
    designer_exists =  false;
    var designer_name = $('input[name="name"]').val();
    $.ajax( { async:false,
             type: "GET", 
             url: "/api/check_brand_exists/", 
             data : {name : designer_name }, 
             success: function(data) {
                    designer_exists = $.parseJSON(data);
                }}).statusText;
    return designer_exists;
}

Answer 4

As Dimitrov correctly noted it's asynchronous. If you want to encapsulate the ajax call within the function you could pass in the success callback.

function checkDesignerName(name, successCallback)

and then you assign it to the jQuery ajax success function.