[Django] Как отобразить сообщение (правильное или неправильное) после отправки формы, не обновляя страницу?

Question

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

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

Вот мой взгляд:

class QuizView(generic.ListView):
    template_name = 'geniusdennis/quiz.html'
    queryset = Spanish.objects.all()

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # grab the max id in the database       
        max_id = Spanish.objects.order_by('-id')[0].id
        random_id = random.randint(1, max_id + 1)
        random_spanish_question = Spanish.objects.filter(id__gte=random_id)[0]
        context['random_spanish_question'] = random_spanish_question
        return context

Вот моя функция для проверки ответа:

def checkans(request, spanish_id):
    random_spanish_question = get_object_or_404(Spanish, pk=spanish_id)
    query = request.GET.get('ans')
    coreng = random_spanish_question.english_set.get()
    if query == str(coreng):
        return render(request, 'geniusdennis/quiz.html',{
                'message': "Correct!",
            })
    else:
        return render(request, 'geniusdennis/quiz.html', {
                'message': "Incorrect.",
                'correct_answer': "The correct answer is " + str(coreng),
            })

А вот моя HTML страница:

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'geniusdennis/style.css' %}">

{% if random_spanish_question %}
<div class="flexcontainer" style="justify-content: center;">
    <div class="sectiontitle">Quiz time
    </div>
        <div class="question_card">
            <div class="question_word">{{ random_spanish_question }}</div>
            <form action="/checkans/{{random_spanish_question.id}}/" method="get">{% csrf_token %}
                <label for="ans">Answer:</label>
                <input type="text" name="ans"/>
                <input type="submit" value="Submit"/>
            </form>
        <input type="submit" value="Skip"/>

        </div>
</div>
{% else %}
{% if message %}
        <div class="message">
            {{ message }}
        </div>
        <div class="ans">
            {{ correct_answer }}
        </div>
        {% endif %}
{% endif %}

Answer 1

Вам нужно ajax, поэтому вам нужен код js.

<scrip src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('form').on('submit', function(e) { // or you can get the form by id if you set it

e.preventDefault(); // avoid to execute the actual submit of the form.

var form = $(this);
var url = form.attr('action');

$.ajax({
       type: 'GET',
       url: url,
       data: form.serialize(), // serializes the forms elements.
       success: function(data)
       {
           ... // whatever you want to do
           var alertMessage = data.message;
           if (data.correct_answer) {
               alertMessage += ' ' + data.correct_answer;
           }
           alert(alertMessage); // show response
       }
     });
});
</script>

html формы будут go до action url. Если вы хотите, чтобы на вашей странице были изменения или функции без reload, вам нужно использовать js.

Answer 2

Как правило, в веб-приложениях необходимо отображать одноразовое уведомление (также известное как «fla sh message») для пользователя после обработки формы или некоторых других типов ввода данных пользователем.

Для этого Django предоставляет полную поддержку для Cook ie - и обмена сообщениями на основе сеанса, как для анонимных, так и для аутентифицированных пользователей. Структура сообщений позволяет временно хранить сообщения в одном запросе и извлекать их для отображения в последующем запросе (обычно в следующем). Каждое сообщение помечено указанным уровнем c, который определяет его приоритет (например, информация, предупреждение или ошибка).

для реализации сообщений см .: https://docs.djangoproject.com/en/1.11/ref/contrib/messages/