javascript - 使用 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")
}

如果此人只是加载注册 View ，它会返回页面，否则，将调用它来检查是否存在用户:

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 [, 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).

示例:

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