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

Question

所以我一直在尝试让它与 Ajax 和 JQuery 一起使用，但我似乎无法得到它。我对这两个都是新手。抱歉，如果这很微不足道，我已经搜索并研究了以前的答案一段时间了。

信息:

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

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

该信息最初(并成功)从我的主 python 脚本填充到一个名为 get_system_info() 的较大函数中:

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

我希望元素每秒自动重新加载一次，所以我尝试使用 JS 来执行此操作，如下所示(我认为这会重新运行我的 python 函数，因为重新加载页面会更新它):

function() {
    setInterval(function() {
        $("#system_info_tag").load(location.href + " #system_info_tag");
    }, 1000);
});

它被加载到我的 html 文件中:

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

页面加载正确，信息正确，但元素不会自动重新加载。任何帮助将不胜感激。

Answer 1

ma​​in.py

@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()

templates/system_info.html

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

我想还是这样