使用 ajax 更新 Django 模板数据答案

【问题标题】：Django template data update using ajax使用 ajax 更新 Django 模板数据
【发布时间】：2020-08-05 06:56:07
【问题描述】：

我正在尝试使用 ajax 脚本在 Django 模板上定期（10 秒）更新我的数据。我是前端开发的新手。

使用其他文章，我可以这样做。但是每次页面刷新都会创建多个页面刷新线程，每10秒更新请求翻倍。

以下是我的 django 模板 sn-p：

<body id="page-top">
 <div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr class="table-info">
        <th style="text-align:center">Parameter</th>
        <th style="text-align:center">A</th>
        <th style="text-align:center">B</th>
      </tr>
    </thead>
      <tbody>
      {% for para, details in manualData.items %}
      <tr>
         <th style="text-align:center" scope="row">{{ details.1.name }}</th>
           {% for key, entity in details.items %}
        <td style="text-align:center">
                <font color="white" size="4px">{{ entity.value }}</font>
            </td>
           {% endfor %}
          </tr>     
      {% endfor %}
      </tbody>
  </table>
 </div>
</body>

我使用的ajax脚本如下：

<script type="text/javascript">
        function refresh() {
         var_ref =  $.ajax({
                success: function (data) {
                    $('#page-top').html(data);
                }
            });
        }
        $(function () {
            setInterval('refresh()', 10000);
        });
    </script>

最后，我只需要：

一旦刷新进程被调用，新进程应该不被创建，否则如果要创建新进程，则中止过去的进程定义。

请帮助我实现同样的目标。

提前致谢

纳库尔

【问题讨论】：

你的视图是什么样的，你在“数据”中有什么？
嗯，id="page-top" 是整个 body... 也许您需要从后端请求或在前端重写更具体的内容，例如全局 div 在正文内，同时将脚本保留在此 div 之外。此外，您可能更喜欢在 $( document ).ready() 上启动计时器；
这能回答你的问题吗？ Refresh page periodically using jquery, ajax and django

标签： django ajax django-templates

【解决方案1】：

你需要你的 ajax 调用是同步的而不是异步的，这样你会阻塞线程直到你得到你需要的数据

可以通过添加corresponding attribute on the ajax call来完成

在行业中，您通常会使用模板系统来加载诸如 react、angular 或 vue 之类的东西，它们会不断更新 DOM，而无需进行无休止的轮询

【讨论】：

【解决方案2】：

感谢帖子中的回答：Refresh page periodically using jquery, ajax and django。

另外，感谢@Mr-Programs 关于异步属性的建议。

我的查询得到了合适的答案，并按如下方式更新了 javascript。

<script>
         function worker(){
         var url =  'yoururl';
         $.ajax({
          type:'get',
          url: url,
          async: false,
          success: function(data) {
          var dtr = $('.page-top',data); 
          # not necessarily body div, can use any section required to be updated
          $('.page-top').html(dtr);
                complete: function() {
                setTimeout(worker, 10000);
               }
          });
         }
         $(document).ready(function(){
         setTimeout(worker, 10000);
         });

         };
        </script>

【讨论】：