JsonResponse неправильно отправляет меня на новый URL - PullRequest
Новая
       80

JsonResponse неправильно отправляет меня на новый URL

1 голос
/ 05 августа 2020

Я получаю очень странную ошибку. Я пытаюсь создать форму входа, которая будет проверять правильность комбинации имени пользователя и пароля. После ввода имени пользователя и пароля функция views.py принимает информацию и выполняет аутентификацию. Если окажется, что комбинация имени пользователя и пароля не подходит, она должна вернуть пробелы для данных = {"username": "", "pass": ""} и вернуться к вызову ajax, который затем должен показать текст ошибка «Комбинация имени пользователя и пароля неверна».

Когда я введу несуществующее значение адреса электронной почты / имени пользователя или неправильный пароль для существующего адреса электронной почты / имени пользователя, он перенаправит меня на совершенно новый URL-адрес, заканчивающийся на / login_user / и отображает {"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'),

логин. 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)

логин. 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>

1 Ответ

0 голосов
/ 05 августа 2020

у вас есть отправка типа ввода, тогда это обработает действие формы до Ajax, попробуйте изменить тип на кнопку. 

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

Надеюсь, это решит вашу проблему.

Отредактировано

Тип «submit» отправит элементы формы на страницу действия. Тип «кнопка» - нет.

Если по какой-либо причине вам нужно разместить кнопку отправки, вам необходимо использовать функцию предотвращения preventDefault для события отправки. 

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