JsonResponse 错误地将我发送到新网址

Question

我遇到了一个非常奇怪的错误。我正在尝试制作一个登录表单，该表单将检查以确保用户名/密码组合正确。获取用户名和密码后，views.py 函数获取信息并进行身份验证。如果结果证明用户名/密码组合不好，它应该为 data = {"username": "", "pass":""} 返回空白并返回到 ajax 调用，然后应该显示一个文本错误“用户名和密码组合不正确”。

当我为现有的电子邮件/用户名输入不存在的电子邮件/用户名值或不正确的密码时，它会将我重定向到以 /login_user/ 结尾的全新 url 并显示 {"username": "", "pass ":""} 作为一些新 html 文件中的文本。

完全不知道为什么会发生这种情况，我在控制台中遇到的错误是

Resource interpreted as Document but transferred with MIME type application/json: "http://localhost:8000/rab/login_user".

命令提示符给出以下错误：

[05/Aug/2020 11:15:54] "POST /rab/login_user HTTP/1.1" 200 28
Forbidden (CSRF token missing or incorrect.): /rab/login_user

urls.py

path('login_user', views.login_user, name='login_user'),

login.js

$(document).ready(function() {
                    
    $("#login-btn").on("click", function(e){
        var tk = $(this).attr("data-token");
        let username = $("#login-username").val();
        let pw = $("#login-pw").val();
        let data = $(this).serialize();

        $.ajax({
            url: $('#log-form').attr("action"),
            type: 'POST',
            dataType: 'json',
            contentType: false,
            data: {
                'csrfmiddlewaretoken': tk, 'username': username, 'pass':pw
            },
            success: function(data) {
                if (data.username == "") {
                    console.log('Got here');
                    $(".login-error-messages").text("Username and password combination was incorrect!").fadeIn().delay(10000).fadeOut();
                } else {
                    sessionStorage.setItem("restaurantID", 1);
                    sessionStorage.setItem("userID", 1);
                }
            },
        });
    });

views.py

@require_http_methods(['POST'])
def login_user(request):
    username = request.POST['username']
    password = request.POST['pass']
    user = authenticate(username = username, password = password)
    if (user is not None):
        login(request, user)
        return redirect_user(user.role.id)
    else:
        data = {'username':"",'pass':""}
        return JsonResponse(data)    

login.html

                 <form class="login" id = "log-form" method="POST" action="login_user">
                    {% csrf_token %}
                        <p class="form-title">
                            User login
                        </p>

                        <div class="wrap-input">
                            <input id = "login-username" class="input" type="email" name="username" placeholder="Username (Email)" required>
                        </div>

                        <div class="wrap-input">
                            <input id = "login-pw" class="input" type="password" name="pass" placeholder="Password" required>
                        </div>
                        
                        <div class="container-form-btn">
                            <input type=Submit id="login-btn" class="form-btn" value="Login" data-token = "{{ csrf_token }}">
                            <!--<button id="login-btn" class="form-btn" type="button">
                                Sign in
                            </button>-->
                        </div>
                </form>
                <p><div class="login-error-messages" style="display:none;"></div></p>

Answer 1

你有一个输入类型提交，那么这将在Ajax之前处理表单动作，尝试将类型更改为按钮。

<input type="button" id="login-btn" class="form-btn" value="Login" data-token = "{{ csrf_token }}">

我希望这能解决你的问题。

已编辑

“提交”类型会将表单元素发送到操作页面。 “按钮”类型没有。

如果出于任何原因需要放置提交按钮，则需要在提交事件上使用功能 prevent preventDefault 功能。

$("#log-form").submit(function(event){
        event.preventDefault();
});