Django-使用Javascript刷新模板中div的最佳方法？

我想每30秒刷新一次嵌入谷歌图表的

，以显示它正在使用的模型中的数据更新

以下是模板：

metrics.html

{% extends 'metrics/metrics_header.html' %}
{% block content %}

    <h1>Metrics</h1>
    <p>Submitted = {{ submitted }},
        Conforming = {{ conforming }}
        Transcoding = {{ transcoding }}
        Complete = {{ complete }}
        Error = {{ error }}
    </p>

      <script type="text/javascript">
        google.charts.load("current", {packages:['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
          var data = google.visualization.arrayToDataTable([
                ['Job State', 'Jobs', { role: "style" }],
                ['Submitted', {{ submitted }},'blue'],
                ['Conforming', {{ conforming }},'purple'],
                ['Transcoding', {{ transcoding }},'yellow'],
                ['Complete', {{ complete }},'green'],
                ['Error', {{ error }},'red']
          ]);

          var view = new google.visualization.DataView(data);
          view.setColumns([0, 1,
                           { calc: "stringify",
                             sourceColumn: 1,
                             type: "string",
                             role: "annotation" },
                           2]);

          var options = {
            title: "Total Number of Jobs Processed",
            bar: {groupWidth: "100%"},
            legend: { position: "none" },
          };
          var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
          chart.draw(view, options);
      }
      </script>
<div id="columnchart_values" style="width: 100%; height:600px;"></div> 
{% endblock %}

{%extends'metrics/metrics\u header.html%}
{%block content%}
韵律学
已提交={{Submitted}}，
一致性={{一致性}
转码={{Transcoding}}
Complete={{Complete}}
错误={{Error}

load（“当前”{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Job State'，'Jobs'，{role:'style}]，
['Submitted'，{{Submitted}，'blue']，
[‘一致性’、{{一致性}、‘紫色’]，
['Transcoding'，{{Transcoding}}，'yellow']，
['Complete'，{{Complete}，'green']，
['Error'，{{Error}}，'red']
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1，
{calc:“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”}，
2]);
变量选项={
标题：“已处理的作业总数”，
条：{groupWidth:“100%”，
图例：{位置：“无”}，
};
var chart=new google.visualization.ColumnChart（document.getElementById（“ColumnChart_values”）；
图表绘制（视图、选项）；
}
{%endblock%}

我一直在使用它刷新整个页面：：

<script>
    setTimeout(function(){
        window.location.reload(true);
    }, 5000);
</script>

setTimeout（函数（）{
window.location.reload（true）；
}, 5000);

---

您可以想象，当整个页面每5秒重新加载一次时，它看起来真的很糟糕，有没有一种更令人欣喜的方式来重新加载包含jinja2变量的

setInterval（函数（）{
$（“#要重新加载的div”）.load（“源内容的url”）；
}, 1000); // 这将每1秒重新加载一次。

---

我在Django中使用它，所以我必须创建一个视图来创建

“源内容的url”

，然后在该应用程序的url模式中尊重它。

我使用Jquery

.load（）解决了我的问题

setInterval（函数（）{
$（“#要重新加载的div”）.load（“源内容的url”）；
}, 1000); // 这将每1秒重新加载一次。

我在Django中使用它，所以我必须创建一个视图来创建
“源内容的url”
，然后在我的url模式中尊重它

setInterval(function () {

    $("#div-you-want-to-reload").load("url-for-source-content");

}, 1000); // This reloads the <div> every 1 second.