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')

用户登录：表单提交后不会发送用户名和密码。页面冻结。索引页面不会根据需要重定向到home.html。有什么问题，是ajax发送数据还是什么？

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>

特别注意更新的名称属性和表单的操作方法。

在视图中，您不再需要ajax检查：

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

希望这有帮助。

使用Ajax使用popup-modal登录django。

1 个答案: