Обновление данных в html без перезагрузки страницы

У меня есть словарь с вопросами и ответами. Я хотел бы отправлять по одному вопросу за раз. На веб-странице у меня есть div, группирующий вопросы и ответы. Я хотел бы, чтобы только эта часть обновлялась без перезагрузки страницы. Также есть кнопка отправки

Когда пользователь нажимает на кнопку, данные отправляются в views.py, затем вид отправляет следующий вопрос.

Я пытался сделать это, но нет обновления в html со следующим вопросом

urls.py

from django.urls import path, re_path
from . import views
urlpatterns = [ path('quizz', views.initQuiz, name="quizz"),
    re_path(r'^nextQuestion$', views.nextQuestion, name='nextQ') ]

views.py

def initQuiz(request):
    #with open("testjson.json") as f: data = json.load(f)
    data = [{"question": "q1", "responses": ["rep1", "rep2", "rep3"]}, 
            {"question": "q2", "responses": ["rep1", "rep2", "rep3", "rep4"]}]
    request.session['data'] = data
    request.session['numQuestion'] = 0
    return nextQuestion(request)

def nextQuestion(request):
    if request.method == "POST":
        request.session['numQuestion'] = request.session.get('numQuestion') + 1
    data = request.session.get('data')
    numQuestion = request.session.get('numQuestion') 
    numResponse  = list(range(1, len(data[numQuestion]["responses"])+1))
    return render(request, 'quizz.html', 
                  context={"question" : data[numQuestion]["question"],
                           "responses": zip(data[numQuestion]["responses"], numResponse)}

quizz.html

   <div class="container-quiz">
        <p class="question"> {{question}} </p>
        <div class="listReponse">
            <div class="reponses">
                {% for rep in responses%}
                <input name={{rep.1}} type="checkbox" class="reponse">
                <label for={{rep.1}}>{{rep.0}}</label>
                {% endfor %}
            </div>
        </div>
    </div>
    <form id="myForm" method="POST">
        {% csrf_token %}
        <button type="submit">Valider</button>
    </form>

<script src="{% static 'js/quizz.js' %}"></script>

quizz.js

const form = document.getElementById('myForm')
form.addEventListener('submit', sendData);
function sendData(event){
    event.preventDefault();
    const csrf  = $('input[name="csrfmiddlewaretoken"]').val()
    $.ajax({
        type: "POST",
        url: 'nextQuestion',
        data: {
            csrfmiddlewaretoken : csrf,
            "result": "data"
        },
        dataType: "json",
        success: function (data) { alert("successfull") },
        failure: function () { alert("failure");}
    })
}

Вернуться на верх