$ ajax命令和Json響應

在我的django應用程序中，我嘗試使用ajax來檢查用戶名是否已經存在，如果是這種情況，則顯示錯誤。

這裏是我有什麼

HTML：

<form method="post" id='my_form'> 
{% csrf_token %} 
    <input id='username' type="text" name="username"/> 
<button type="submit">Valider</button> 
</form>

JS：

$('#my_form').submit(function(){ 
    var username = $('#username').val(); 
    if (username == ''){ 
     alert('please enter username'); 
     return false; 
    } 

    $.ajax({ 
      type: "POST", 
      url: "/auth_validate", 
      data: {'username': $('#username').val(), 'csrfmiddlewaretoken': '{{csrf_token}}'}, 
      dataType: "text", 
      success: function(response) { 
        var response = $.parseJSON(response); 
        if (response.success){ 
         return true; 
        } 
        else{ 
         alert(response.error); 
         return false; 
        } 
      }, 
      error: function(rs, e) { 
        alert(rs.responseText); 
        return false; 
      } 
     }); 
})

觀點：

def auth_validate(request): 
    error = '' 
    success = False 
    if request.method == 'POST': 
     username = request.POST.get('username', None) 
     if not username: 
      error = _('Please enter username') 
     elif User.objects.filter(username__exact=username).exists(): 
      error = _('Sorry this username is already taken') 
     else: 
      success = True 

    ajax_vars = {'success': success, 'error': error} 
    return HttpResponse(simplejson.dumps(ajax_vars), mimetype='application/javascript')

當我輸入用戶名（如果存在或不）會出現一個空的警報和時間我點擊'確定'，表單被提交。此外，錯誤不會出現。

任何想法爲什麼它不工作？

謝謝你的幫助。

來源

2012-12-19 Marcolac

你應該總是添加return false您$阿賈克斯塊之後，否則，無論如何你都會得到你的表單。 –

@SamueleMattiuzzo我編輯它。但沒有任何改變。 – Marcolac

你的觀點和模板看起來不錯我建議你使用原生JSON處理函數和序列化，而不是「送」 data手動形式。請注意在事件回調結束時的return false，而不是在success和error回調中。

$('#my_form').on('submit', function(){ 
    var $form = $(this); 
    $.ajax({ 
     type: "POST", 
     url: "/auth_validate", 
     data: $form.serialize(), 
     dataType: "json", 
     success: function(response) { 
      if (!response.success) { 
       alert(response.error); 
      } else { 
       alert('This username is available!'); 
      } 
     }, 
     error: function(rs, e) { 
      alert(rs.responseText); 
     } 
    }); 
    return false; 
});

祝你好運:)

UPDATE：

請檢查其他的成功回調;）

來源

2012-12-19 18:46:13 Gerard

謝謝你的幫助。當我嘗試這個解決方案時，我有一個巨大的警告框出現一個非常大的錯誤消息，開始像這樣：TypeError at/auth_validate/ 不是JSON序列化任何想法在哪裏問題來自？ – Marcolac

能否請您提供一個鏈接到dpaste/gist的完整堆棧跟蹤，以便我或其他人可以提供幫助？（請不要粘貼在這裏） – Gerard

好吧，它的工作原理。我只是有一個非常大的error_message，因爲我在本地工作並且調試爲真。非常感謝您的幫助。 – Marcolac

JSON看起來像django在迴應什麼？

你知道哪個警報被調用嗎？它是錯誤函數還是成功函數？

我不認爲你需要這條線

var response = $.parseJSON(response);

響應應該已經是JSON。

來源

2012-12-19 16:40:24 kayluhb

所調用的警報是錯誤功能之一。 – Marcolac

因爲這部分的：

  var response = $.parseJSON(response); 
      if (response.success){ 
       return true; 
      } 
      else{ 
       alert(response.error); 
      }

響應不具有值「成功」，所以一個emply警告對話框彈出。 jQuery已經注意了，這個檢查只在請求成功時完成，所以你不要這樣做。

如果您不想使用瀏覽器提交的for，請在功能末尾添加return false;，以避免瀏覽器的默認行爲。

來源

2012-12-19 16:40:47 Stefan

我不確定這是否是問題，因爲彈出的警報是錯誤功能之一。如果我刪除了我的功能的第一部分（成功：功能...），空警報仍然出現。 – Marcolac

我試圖把一個返回false;在我的ajax函數結束時。但是當我發佈一些我現在有403錯誤，並彈出一個解釋，這是由於一個csrf令牌問題。 – Marcolac

$ ajax命令和Json響應

回答

相關問題