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函数，因为重新加载页面更新它）：< / p>

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

<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

{{1}}

我想无论如何

Answer 2

您已将自己的脚本包裹起来的自我调用函数未被调用。它应该是：

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

注意最后的额外()。那是什么实际上称之为在前一个括号内定义的函数。

接下来，在您的HTML中，从#标记上的id中删除<pre>。 #仅用于选择器，而不是实际属性。

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

接下来，删除您锚点开头的空格，然后附加到网址。

location.href + '#system_info_tag'

最后，请检查浏览器的开发工具中的“网络”标签，看看这些load()请求是否正在触发。如果是，请查看他们正在拨打的网址。他们很有可能会输入错误的网址，因此无法加载任何内容。

基于时间在Python / Flask中自动重新加载Jinja元素而不刷新页面

2 个答案: