2017-08-16 111 views
0

我想在用户提交不正确的登录表单时在引导模式中显示错误。现在,提交表单只是重新加载当前页面,所以我无法获得JSON响应。Django登录表单提交刷新页面

basic.html该登录模式出现

... 
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#loginModal" id="login_modal_trigger">Log In</button> 

{% include 'registration/login.html' with form=form %} 
... 

登记/ login.html的

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Log In</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 

     <div id="content-container" class="container p-none"> 
      <div class="lgn-container col-lg-8"> 
       <form id="login-form" method="post" 
         action=""> 
        {% csrf_token %} 
        <table class="table"> 
         <tr> 
          <td><label for="id_username">Username</label></td> 
          <td><input id="id_username" name="username" 
             type="text" class="form-control"></td> 
         </tr> 
         <tr> 
          <td><label for="id_password">Password</label></td> 
          <td><input id="id_password" name="password" 
             type="password" class="form-control"></td> 
         </tr> 
        </table> 
        {% if form.errors %} 
         <p class=" label label-danger"> 
          Your username and password didn't match. 
          Please try again. 
         </p> 
        {% endif %} 

        <input type="submit" id="ajax_form_submit" value="Login" 
          class="btn btn-primary pull-right" /> 
       </form> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

的script.js: 我想通event.preventDefault();将防止刷新时出现错误。

$(document).ready(function() { 
$("#login-form").submit(function(event) { 
    jQuery.ajax({ 
     "data": $(this).serialize(), 
     "type": $(this).attr("method"), 
     "url":  "{% url 'login_user' %}", 
     "success": function(response) { 
      // switch(response.code) { 
      //  // Do what you want with the received response 
      // } 
      console.log(response); 
      if (response.code == 0) { 
       console.log("fail"); 
      } 
     } 
    }); 
    event.preventDefault(); 
}); 
}); 

项目/ urls.py

... 
urlpatterns = [ 
    ... 
    url(r'^login/$', views.login_user, name='login_user'), 
    ... 
] 
... 

应用目前/ views.py

from django.contrib.auth import authenticate, login 
def login_user(request): 
    username = request.POST['username'] 
    password = request.POST['password'] 
    user = authenticate(request, username=username, password=password) 
    if user is not None: 
     login(request, user) 
     # Redirect to a success page. 
     return HttpResponseRedirect(reverse('app:detail', args=(username,))) 
    else: 
     # Return an 'invalid login' error message. 
     response = {'code': 0} 
     return HttpResponse(response, content_type='application/json') 
     # return HttpResponse(status=404) 

登录莫代尔甚至不跟我的编辑工作,但我的主要问题是在提交后刷新页面,而不仅仅是给我一个JSON响应,然后用HTML编辑HTML。我使用的js主要来自其他职位。

回答

0

在您的应用程序/ views.py中,你需要别人(标识埃罗登录)改变:

return HttpResponseRedirect(reverse('app:login', args=(response,))) 

现在你传递的第一个参数登录视图的名称,AGR您发送'响应'。

在模板:

   {% if code == 0 %} 
        <p class=" label label-danger"> 
         Your username and password didn't match. 
         Please try again. 
        </p> 
       {% endif %} 
+0

谢谢,但网页仍然重新载入上提交。 – Flo

+0

页面将重新加载,但您需要重新加载并回顾登录错误的参数。 – mcmartin