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)
},
});
});