Question

我正在尝试使用ajax脚本在Django模板上定期（10秒）更新数据。我在前端开发方面相对较新。

使用其他文章，我能够做到。但是每次页面刷新时，都会创建多个用于页面刷新的线程，并且更新请求每10秒增加一倍。

以下是我的django模板代码段：

<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>

最后，我需要做的是：

一旦刷新过程称为，新过程应不已创建，否则如果要使用新进程，则过去的进程将被中止定义。

请帮助我达到同样的目标。

预先感谢

纳库尔

Answer 1

您需要ajax调用是同步的而不是异步的，这样您将阻塞线程，直到获得所需的数据为止

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

来完成

在行业内时，通常会使用模板系统加载诸如React，Angular或Vue之类的内容，这些内容会不断更新DOM，而无需进行无休止的轮询

Answer 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>

使用Ajax更新Django模板数据

2 个答案: