基於時間的自動重新加載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

main.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()

模板/ 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>

我還是想

Answer 2

包裝了腳本的自調用函數不會被調用。 它應該是：

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

請注意結尾處的多余() 。 這就是實際上調用在上一個括號內定義的函數的內容。

接下來，在您的HTML中，從<pre>標記的id刪除# 。 #僅用於選擇器，不用於實際屬性。

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

接下來，從您要添加到URL的錨點的開頭刪除空格。

location.href + '#system_info_tag'

最后，在瀏覽器的開發工具中檢查“網絡”標簽，以查看這些load()請求是否還在觸發。 如果是，請查看他們正在調用哪個URL。 他們很有可能輸入錯誤的URL，因此不會加載任何內容。