使用 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

Answer 2

编辑：确保响应返回一个 STRING true 或一个 STRING false

编辑：响应是返回一个字符串 true 或一个字符串 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;
         }
    });

Answer 3

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

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

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

jQuery.post( url [, data] [, success(data, textStatus, jqXHR)] [, 数据类型])

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

data 随请求发送到服务器的映射或字符串。

success(data, textStatus, jqXHR) 执行的回调函数 如果请求成功。

dataType 服务器预期的数据类型。默认： 智能猜测（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")
});