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