Блог

Я пытался создать AJAX-функцию, которая отправляет две переменные JS, Score и Mistake, обратно в серверную часть Django и обновляет с их помощью расширенную пользовательскую модель.

Чтобы сделать это, я начал с функции AJAX, которая выглядит следующим образом:

 $(document).ready(function() {
       $("#test").submit(function(event){
         event.preventDefault();
         console.log("form submitted!");
            $.ajax({
                 type:"POST",
                 url:"/update/quiz/",
                 data: {
                        csrfmiddlewaretoken: window.CSRF_TOKEN,
                        'score': score,
                        'mistake' : mistake
                        },
                 success: function(){
                     $('#message').html("<h2>Contact Form Submitted!</h2>") 
                 }
            });
            return false;
       });
});
  

Views.py

 class Quiz(TemplateView):
    template_name='quiz.html'

    def post(self, request, *args, **kwargs):
        if request.is_ajax():
          message = "Yes, Ajax!"
        else:
          message = "Not Ajax!"
        return HttpResponse(message)
  

URLS.py

 from django.urls import path

from home.views import HomepageName, Homepage, Quiz
from . import views

urlpatterns = [
    path('quiz/', Quiz.as_view()),  
    path('update/quiz/', Quiz.post),
    path('<slug:slug>/', HomepageName.as_view()),
    path('', Homepage.as_view()),
]
  

И шаблон

 <form method='POST' id ='test'>
        {% csrf_token %}
        <input type='submit' value='Test button'/>
        <div id = 'message'>Initial text</div>
</form>
  

Я уже пытался изменить маршрутизацию URL-адресов и добавить новый URL-адрес, думая, что это сработает, но при нажатии кнопки Отправки он всегда загружает новую страницу, а затем на этой странице отображается «Не Ajax!»

Я предполагаю, что он выполняет действие HTML-формы по умолчанию, а не AJAX, поскольку они также не выводятся на консоль, которую я добавил, чтобы получить дополнительную информацию

Спасибо за всю вашу помощь. Пожалуйста, прокомментируйте, если мне нужно предоставить больше информации!