Отправка AJAX-запроса на сервер с помощью jQuery

Question

Я хочу отправить очень простой почтовый запрос с использованием AJAX на тот же URL-адрес. Он должен взять имя пользователя и сравнить его с БД, чтобы увидеть, существует ли уже пользователь с таким именем, возвращая строку с этим эффектом. Что-то не так с функцией javascript, которая отправляет запрос:

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")
}

Если человек просто загружает представление регистрации, он возвращает страницу, в противном случае он вызывается для проверки существующего пользователя:

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")

Есть ли что-нибудь, что вы можете увидеть относительно того, почему JS игнорируется? Firebug ничего не нашел.

Answer 1

Ajax означает «Асинхронный JavaScript и XML», поэтому он не ждет завершения $ .post, а просто продолжается в вашем коде.

Чтобы решить эту проблему, вы должны использовать функцию обратного вызова:

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

jQuery.post (url [, данные] [, success (data, textStatus, jqXHR)] [, dataType])

url Строкасодержит URL-адрес, на который отправляется запрос.

data Карта или строка, отправляемая на сервер с запросом.

success (data, textStatus, jqXHR) Обратный вызовфункция, которая выполняется при успешном выполнении запроса.

dataType Тип данных, ожидаемых от сервера.По умолчанию: Intelligent Guess (xml, json, script или html).

Пример:

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

Вы также можете передать анонимный обратный вызов:

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

Во-первых, у вас есть некоторые проблемы с вашей точки зрения.Вы должны проверить, является ли POST от AJAX или стандартным POST;в противном случае вы не сможете добавить пользователя позже.(На самом деле часть AJAX должна быть ее собственным представлением, поскольку она на самом деле не является частью процесса регистрации как таковой, а скорее проверкой правильности. Позже вы можете захотеть создать пользователя через AJAX, и вы не сможетепотому что представление не сможет различить два разных AJAX-запроса).

Далее get не возвращает None, когда объект не существует;это вызывает исключение ObjectDoesNotExist.Итак, ваше if утверждение там не сработает;вместо этого вы должны использовать блок try.

Я обновил ваше представление ниже, соответственно:

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

РЕДАКТИРОВАТЬ: убедитесь, что ответ отправляет обратно STRING true или 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;
         }
    });