使用jQuery发送AJAX请求到服务器

Question

I want to send a very basic post request using AJAX to the same url. It should take the username and check it against the DB to see if a user with that name exists already, returning a string to that effect. There is something wrong with the javascript function that is sending the request:

function usernameCheck(){
$.post("http://omnicloud.me/signup", 
  {username: $("#username").value}, 
  function(response){
    if(response=="true"){
       $('#passAlert').innerHTML("Sorry, that username is already taken")
    }
});

return !($('#passAlert').value == "Sorry, that username is already taken")
}

If the person is just loading the signup view, it returns the page, otherwise, it is being called to check for a user existing:

def signup(request):
    if request.method == 'GET':
        return render_to_response('signup.html', context_instance=RequestContext(request))
    else: 
    #query db for user with username provided in POST, return if it exists
        user = User.objects.get(username=request.POST["username"]) 
        if user is not None:
            return HttpResponse("true")
        else:
            return HttpResponse("false")

Is there anything you can see as to why the JS is being ignored? Firebug found nothing.

Answer 1

Ajax means "Asynchronous JavaScript and XML" so it does not wait for $.post to finish but just goes on within your code.

To solve this issue you have to use a callback function:

http://api.jquery.com/jQuery.post/

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

url A string containing the URL to which the request is sent.

data A map or string that is sent to the server with the request.

success(data, textStatus, jqXHR) A callback function that is executed if the request succeeds.

dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).

Sample:

function usernameCheck(){
    $.post("http://omnicloud.me/signup", 
      {username: $("#username").val()}, 
      function(response){
        if(response=="true"){
           $('#passAlert').html("Sorry, that username is already taken")
        }
    });
}

You might also pass an anonymous callback:

function usernameCheck(successCallback){
    $.post("http://omnicloud.me/signup", 
      {username: $("#username").val()}, 
      function(response){
       if(response=="true") successCallback();
    });
}

// Somewhere else in your code:

usernameCheck(function(){
  $('#passAlert').html("Sorry, that username is already taken")
});

Answer 2

First, you have some problems in your view. You need to check whether the POST is from AJAX or a standard POST; otherwise, you won't be able to actually add the user later. (Really the AJAX part should be it's own view, since it really isn't part of the signup process per se, but rather a validation check. Later, you might actually want create a user via AJAX, and you wouldn't be able to because the view wouldn't be able to distinguish between the two different AJAX requests).

Next, get doesn't return None when the object doesn't exist; it raises an ObjectDoesNotExist exception. So, your if statement there won't work; you must use a try block instead.

I've updated your view below, accordingly:

def signup(request):
    if request.method == 'GET':
        return render_to_response('signup.html', context_instance=RequestContext(request))
    elif request.is_ajax(): 
        # query db for user with username provided in POST, return if it exists
        try:
            user = User.objects.get(username=request.POST["username"]) 
        except User.DoesNotExist:
            return HttpResponse("false")
        else:
            return HttpResponse("true")
    else:
        # Normal post, add new user

Answer 3

EDIT: make sure the response sends back a STRING true or a STRING false

EDIT: the response IS SENDING BACK A STRING true or A STRING false

function usernameCheck(){
    var exists;
    $.post("http://omnicloud.me/signup", { username: $("#username").val() }, 
      function(response){
         exists = (response == 'true');
         if(exists){
             $('#passAlert').innHTML = "Sorry, that username is already taken";
             return false;
         } else {
             return true;
         }
    });