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

Posted 2023-02-24

【中文标题】如何在 html 中刷新 <div> 而不是整个页面

【英文标题】：How to refresh <div> in html and not the whole page

【发布时间】：2020-09-15 08:10:49

【问题描述】：

我想刷新 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 %

【问题讨论】：

***.com/questions/21133135/… 你可能会在这里找到答案

【参考方案1】：

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

【参考方案2】：

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

例如：

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

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

【讨论】：

阻止表单的默认功能后，调用更新页面上您想要的元素的函数。我已经编辑了我的答案以显示如何。