Django - Как использовать AJAX внутри формы
Я впервые пытаюсь использовать AJAX, так как у нас есть проект Django, но одна из необходимых функций заключается в том, чтобы одна форма вела себя более похоже на приложение react или SPA, поэтому я пытаюсь использовать AJAX для добавления этой функциональности. У меня есть следующий шаблон для страницы. На ней есть форма, позволяющая пользователю выбрать из выпадающего списка, какое у него высшее образование, и должен появиться модал, позволяющий пользователю вводить квалификацию за раз, чтобы она была добавлена в базу данных и отображалась в таблице. Проблема в том, что когда пользователь заполняет модальную форму и нажимает кнопку "Отправить", он, похоже, выполняет обычный GET-запрос, как показано ниже, а не API-запрос для создания квалификаций из модальной формы. AJAX, похоже, не перехватывает запрос.
GET REQUEST
"GET /applications/personal-details/prior-attainment/4/?csrfmiddlewaretoken=s54x6U2BczYThuoYKTryBZwUzdPDuaxmzzubamRRz2Lw4qX1ztjGnAP1XcryPHXP&subject=Maths&qualification_name=Nat+5&date_achieved=2024-02-13&level_grade=A HTTP/1.1" 200 7974
Внутри base.html у меня также есть базовая структура ниже. (Импорт скриптов в беспорядке, это создается как действительно быстрая демонстрация для супервайзеров в качестве POC)
<!DOCTYPE html>
{% load static i18n %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Django Project{% endblock title %}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Custom CSS -->
<!-- <link rel="stylesheet" href="{% static 'css/style.css' %}"> -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% block extrahead %}{% endblock %}
</head>
<body>
<header>
</header>
<main role="main" class="container">
{% block content %}
{% endblock content %}
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% block extrajs %}{% endblock %}
</body>
</html>
URLS для добавления квалификации в URLS.py
path('/qualifications/add/', views.add_qualification, name='add_qualification'),
path('/qualifications/<int:qualification_id>/edit/', views.edit_qualification, name='edit_qualification'),
path('/qualifications/<int:qualification_id>/delete/', views.delete_qualification, name='delete_qualification'),
Просмотров для URLS
def add_qualification(request):
if request.method == 'POST':
form = QualificationForm(request.POST)
if form.is_valid():
qualification = form.save()
return JsonResponse({'status': 'success', 'id': qualification.id})
else:
return JsonResponse({'status': 'error', 'errors': form.errors})
def edit_qualification(request, qualification_id):
if request.method == 'POST':
qualification = get_object_or_404(Qualification, pk=qualification_id)
form = QualificationForm(request.POST, instance=qualification)
if form.is_valid():
qualification = form.save()
return JsonResponse({'status': 'success', 'id': qualification.id})
else:
return JsonResponse({'status': 'error', 'errors': form.errors})
def delete_qualification(request, qualification_id):
if request.method == 'POST':
qualification = get_object_or_404(Qualification, pk=qualification_id)
qualification.delete()
return JsonResponse({'status': 'success'})
Я пытался следовать многочисленным руководствам по настройке AJAX, а также проверил код с помощью некоторых инструментов AI, и все говорят, что он вроде бы должен работать, но AJAX, похоже, не работает, и теперь я застрял на этом уже несколько дней. Я ожидаю, что он, по сути, просто создаст квалификацию с помощью маршрута, а затем закроет модальное окно и отобразит все квалификации. Я понимаю, что было бы намного проще использовать React, и я хотел бы, чтобы мы это сделали, но по другим причинам для POC пришлось использовать Django.