Django + ajax + модальная форма bootstrap5. Как заставить это работать?

Сколько я не пытался закрепить Ajax запрос. В случае успеха должен происходить редирект, в случае неудачи - вывод ошибки. Все способы, которые пытался реализовать уже и не вспомню. Буду очень благодарен, если кто-нибудь на этом примере покажет как работать с Ajax. И где его правильно зарегистрировать? В основном шаблоне? Так как если указывать внутри модального шаблона, то он выполняется слишком рано, еще до загрузки страницы.

Просмотр для авторизации:

def login_view(request):
    """ Обработчик авторизаций, обращение происходит через ajax """

    # небольшая заглушка (Plug since one type of authorization is still disabled)
    if request.method == 'POST' and request.POST.get('type') == 'login':
        return JsonResponse({'status': 'error', 'login_type': 'login', 'msg': 'На данный момент данный метод авторизаций не доступен!'})

    if request.method == 'POST':
        if request.POST.get('type') == 'login':
            try:
                user: User = auth.authenticate(login=request.POST.get('login'), password=request.POST.get('password'))
            except Exception as error:
                return JsonResponse({'status': 'error', 'login_type': 'login', 'msg': str(error)})
            else:
                auth.login(request, user)
        elif request.POST.get('type') == 'token':
            try:
                user: User = auth.authenticate(token=request.POST.get('access_token'))
            except Exception as error:
                return JsonResponse({'status': 'error', 'login_type': 'token', 'msg': str(error)})
            else:
                auth.login(request, user)
        else:
            return JsonResponse({'status': 'error', 'msg': 'Неизвестный тип авторизаций'})
        return JsonResponse({'status': 'ok'})
    else:
        return JsonResponse({'status': 'error', 'msg': 'Запрос должен быть POST'})

Модал для авторизации:

В подключении основного шаблона bootstrap.min.css и в самом конце bootstrap.bundle.min.js

Скорее всего, решение не совсем красивое, но удалось реализовать, используя jquery-3.5.1.js и jquery.form.js (v4.3.0). Вот пример, код находится в основном шаблоне.

let tokenLoginForm = $('#tokenForm');
tokenLoginForm.submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: tokenLoginForm.attr('method'),
        url: tokenLoginForm.attr('action'),
        data: tokenLoginForm.serialize(),
        success: function (data) {
            if (data['status'] === 'error') {
                alert(data['msg'])
            } else if (data['status'] === 'ok') {
                location.reload();
            } else {
                alert('Авторизация вернула неизвестный статус!')
            }
        },
        error: function (data) {
            alert('Не удалось выполнить запрос! ' + data)
        },
    });
});
Вернуться на верх