Django-Anmeldeformular Aktualisierende Seite senden

Question

Ich möchte einen Fehler in einem Bootstrap-Modal anzeigen, wenn ein Benutzer ein falsches Anmeldeformular einreicht. Im Moment lädt das Senden des Formulars die aktuelle Seite neu, sodass ich die JSON-Antwort nicht erhalten kann.

basic.html wo der Login modal

... 
<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 %} 
... 

Registrierung/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 erscheint: dachte ich event.preventDefault(); erfrischend verhindern würde, wenn ein Fehler auftritt.

$(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(); 
}); 
}); 

Projekt/urls.py

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

app/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) 

Der Login-modal ist zur Zeit nicht einmal mit meinen Änderungen arbeiten, aber mein Hauptproblem ist die Aktualisieren der Seite nach dem Senden, anstatt nur eine Antwort in JSON zu geben, um dann den HTML-Code mit zu bearbeiten. Die js, die ich benutze, sind meistens von anderen Posts.

Answer 1

In Ihrem app/views.py Sie sonst ändern müssen (die erro Login identifizieren) zu:

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

Jetzt übergeben Sie in den ersten Parameter der Name Ihrer Login-Ansicht, und Agr Sie die schicken 'Antwort'.

in Ihrer Vorlage:

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