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

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

首先，您在视图中遇到了一些问题。您需要检查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 

的[GET返回undefined值输出功能（

Answer 2

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

为了解决这个问题，你必须使用一个回调函数：

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

jQuery.post（URL [数据] [，成功（数据，textStatus，jqXHR）] [， dataType]）

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

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

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

dataType服务器期望的数据类型。默认： 智能猜测（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 3

编辑：确保响应发送回一个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; 
     } 
    });