如何在 html 中刷新 <div> 而不是整个页面

Question

我想刷新 html 页面中的特定部分（包含表单），而不是 Django 模板中的整个页面。当用户提交重定向到下一个问题的表单时，表单包含问题和选择。（base.html 包含我的脚本用于创建倒计时）

question_details.html

{% extends 'app/base.html' %}
{% block content %}
<div>    
   <h2>score -{{user.userextend.score}}</h2>
   <form action="{% url 'app:detail' quiz_id=que.quiz.id question_id=que.id %}" method="post" id="user_form">
      {% csrf_token %}
      {% for choice in que.answer_set.all %}
          <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
          <label for="choice{{ forloop.counter }}">{{ choice.answer }}</label><br>

      {% endfor %}
      <input type="submit" value="Next">
   </form>
</div>
{% endblock %}

Answer 1

Django 模板的行为不像 AJAX 应用程序或 SPA。它们遵循传统的请求/响应周期，包括整页重新加载。它可以工作，但您需要使用 AJAX 或其他一些 JavaScript 库。

Answer 2

表单在提交时具有默认的重新加载功能。例如在 react 中使用 Forms 时。单击提交按钮时，我可以告诉组件不要重新加载页面。

例如：

    onSubmit = { (e) => { 
        e.preventDefault(); 
        //call function here to update elements
        updateElement(data);
    }}

这会在单击提交按钮时停止页面重新加载的默认行为。