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

您有一个输入类型Submit，然后它将在Ajax之前处理表单操作，尝试将类型更改为button。

FormOfBlock2

我希望这可以解决您的问题。

已编辑

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

如果出于任何原因需要放置一个提交按钮，则需要在Submit事件上使用函数prevent preventDefault函数。

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

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

1 个答案: