Javascript Python/Flask中基于时间的Jinja元素自动重新加载，无需刷新页面

所以我一直在尝试使用Ajax和JQuery来实现这一点，但似乎无法实现。这两个我都是新手。对不起，如果这是琐碎的，我已经搜索和工作了一段时间以前的答案了

信息：

我的页面html中有一个Jinja标记，我想每秒更新一次：

 <pre id="#system_info_tag">{{ system_info_text }}</pre>

不过，我希望该元素每秒自动重新加载一次，因此我尝试使用JS执行以下操作（我认为这会重新运行python函数，因为重新加载页面会更新它）：

function（）{
setInterval（函数（）{
$（“#系统信息标签”）.load（location.href+“#系统信息标签”）；
}, 1000);
});

将其加载到我的html文件中：

<script src="static/js/update_refresh.js"></script>

---

页面可以加载正确的信息，但元素不会自动重新加载。如果有任何帮助，我们将不胜感激。

您将脚本包装在其中的自调用函数不会被调用。应该是：

(function() {
  // your code
})();

请注意末尾的额外

（）

。这就是调用上一个括号中定义的函数的原因

接下来，在HTML中，从

<pre id="system_info_tag">{{ system_info_text }}</pre>

接下来，从要附加到URL的锚的开头删除空格

@app.route('/')
def root():
    return render_template('system_info.html', system_info_text=get_system_info())

@app.route("/sys_info.json")
def system_info(): # you need an endpoint on the server that returns your info...
    return get_system_info()

---

最后，检查浏览器开发工具中的“网络”选项卡，查看这些

load（）

请求是否触发。如果是，请查看他们调用的URL。他们很有可能访问了错误的URL，因此不会加载任何内容。

main.py

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="content">{{ system_info }}</div> {# this is the original system_info passed in from the root view #}

<script>
setInterval(function(){ // load the data from your endpoint into the div
    $("#content").load("/sys_info.json")
},1000)
</script>

模板/system_info.html

{{system_info}}{{#这是从根视图传入的原始system_info}
setInterval（function（）{//将数据从端点加载到div
$（“#content”）.load（“/sys_info.json”）
},1000)

---

我想不管怎样

即使是这样也不会奏效。。。还有比这更多的问题谢谢你的帮助。我对这些不平衡。我还添加了结束通话，但似乎没有任何改变。OP没有一个端点可以更新他想要的信息。。。我几乎可以保证，他不想将当前页面嵌入当前页面上的div中，但是只要提示在更新函数中抛出一个

console.log（“更新系统信息”）

。。。此外，我认为您不想加载不会引起任何感官上的一瞥的

location.href+“#system_info_tag”

，您不想在屏幕上的id属性中使用“#”。那会弄乱你的选择器。您还需要执行Soviut建议的操作，以便代码实际运行。此外，我建议可能将setInterval更改为setTimeout，在完成后执行另一个setTimeout。1000是一个相当短的轮询时间，请求开始堆积在自己身上的变化可能相当高。

@app.route('/')
def root():
    return render_template('system_info.html', system_info_text=get_system_info())

@app.route("/sys_info.json")
def system_info(): # you need an endpoint on the server that returns your info...
    return get_system_info()

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="content">{{ system_info }}</div> {# this is the original system_info passed in from the root view #}

<script>
setInterval(function(){ // load the data from your endpoint into the div
    $("#content").load("/sys_info.json")
},1000)
</script>