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

Question

我想使用AJAX向相同的网址发送一个非常基本的帖子请求。 它应该使用用户名，并对照数据库进行检查，以查看是否已经存在具有该名称的用户，并返回一个字符串。 发送请求的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为什么被忽略，您能看到什么吗？ 萤火虫一无所获。

Answer 1

Ajax的意思是“异步JavaScript和XML”，因此它不等待$ .post完成，而只是在您的代码中进行。

要解决此问题，您必须使用回调函数：

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

jQuery.post（url [，data] [，success（data，textStatus，jqXHR）] [，dataType]）

url包含请求发送到的URL的字符串。

数据与请求一起发送到服务器的映射或字符串。

success（data，textStatus，jqXHR）如果请求成功，则执行一个回调函数。

dataType服务器期望的数据类型。 默认值：Intelligent Guess（xml，json，脚本或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真或STRING假

编辑：响应发送回STRING真或STRING假

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