Question

当用户提交错误的登录表单时，我想在引导模式中显示错误。现在，提交表单只是重新加载当前页面，因此我无法获得JSON响应。

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。我使用的js主要来自其他帖子。

Answer 1

在app / views.py中，您需要将其他（标识错误登录）更改为：

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

现在，您将第一个参数传递给登录视图的名称，然后发送“响应”。

在你的模板中：

vector = [0,0,0,0,0,0,0,0,0,0]

Django登录表单提交刷新页面

1 个答案: