Ajaxを使用してポップアップモーダルを使用してdjangoにログインします。

Question

HTML部分：

<script> 
$(document).ready(function(){ 
    $("#myBtn2").click(function(){ 
     $("#myModal").modal(); 
    }); 
}); 

function login_to_user(){ 

    var uname = document.getElementById('id_username'); 
    var pass = document.getElementById('id_pass'); 


    $.ajax({ 
       url : /login_user/, 
       type : "POST", 
       dataType : "json", 
       data : {'csrfmiddlewaretoken': '{{ csrf_token }}', 'uname':uname,'pass':pass}, 

       success : function(data){ 
       console.log(data.username); 

       }, 
       error : function(data){alert(data.response);} 
      }); 

    } 
</script> 

Login: 
<li id="myBtn2"><a href='#'><span class="glyphicon glyphicon-log-in"></span> 
     Login</a></li> 

<!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Login Modal content--> 
     {% if error_message %} 
         <p><strong>{{ error_message }}</strong></p> 
        {% endif %} 
     <div class="modal-content"> 
     <div class="modal-header" style="padding:35px 50px;"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4><span class="glyphicon glyphicon-lock"></span> Login</h4> 
     </div> 
     <div class="modal-body" style="padding:40px 50px;"> 

      <form id='for' class="form-horizontal" role="form" method="post" onsubmit="login_to_user()" enctype="multipart/form-data"> 
      {% csrf_token %} 
      <div class="form-group"> 
          <label class="control-label col-sm-2" for="id_username"> 
           Username: 
          </label> 
          <div class="col-sm-10"> 
           <input id="id_username" maxlength="30" name="username" type="text"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label class="control-label col-sm-2" for="id_password"> 
           Password: 
          </label> 
          <div class="col-sm-10"> 
           <input id="id_password" maxlength="30" name="password" type="password"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-sm-offset-2 col-sm-10"> 
           <input type="submit" value='Submit'class="btn btn-success" > 
          </div> 
         </div> 
      </form> 
     </div> 

views.py

if request.method == "POST": 
    if request.is_ajax(): 
     username = request.POST['uname'] 
     password = request.POST['pass'] 

     user = authenticate(username=username, password=password) 
     if user is not None: 
      if user.is_active: 
       login(request,user) 

       return redirect('home') 
      else: 
       return render(request, 'index.html', {'error_message':'Account Deactivaated'}) 
     else: 
      return render(request, 'index.html', {'error_message':'Invalid Login'}) 
return render(request, 'index.html') 

urls.py：url(r'^login_user/$', views.login_user, name='login_user')

userloginの：ユーザ名とパスワードは、フォームのsubmission.The後に送信されることはありませんページはフリーズします。インデックスページは必要に応じてhome.htmlにリダイレクトされません。何が悪いですか、それはajax sendinですか？ gデータまたは何ですか？

Answer 1

あなたは本当にajaxを使用する必要はありません、より単純なバージョンが動作することができます。具体的に更新された名前の属性、およびフォームのアクションメソッドを注意し

<form action="/login_user" id='for' class="form-horizontal" role="form" method="post" enctype="multipart/form-data"> 
    {% csrf_token %} 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="id_username"> 
      Username: 
     </label> 
     <div class="col-sm-10"> 
      <input id="id_username" maxlength="30" name="uname" type="text"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2" for="id_password"> 
      Password: 
     </label> 
     <div class="col-sm-10"> 
      <input id="id_password" maxlength="30" name="pass" type="password"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <input type="submit" value='Submit'class="btn btn-success" > 
     </div> 
    </div> 
</form> 

：この1（モーダル機能の残りの部分を保つ）を使用して、フォームを交換してみてください。このことができます

if request.method == "POST": 
    username = request.POST['uname'] 
    password = request.POST['pass'] 
    ... 

希望：ビューで

は、あなたは、もはやAjaxのチェックを必要としないと思います。