Flask + AJAX + Jquery + JINJA动态更新HTML表

我想动态显示端口状态。我不想重新加载页面以查看新的值。我知道如何获得Python中的端口状态（使用uiApi()）。现在，我使用该值呈现模板并在HTML表格中显示值。我如何使用Flask的值持续更新表格？我有AJAX和jQuery可用。Flask + AJAX + Jquery + JINJA动态更新HTML表

烧瓶代码如下给予：

@app.route('/') 
    def show_auth(): 
     tData = uiApi() 
     .. 

     return render_template('show_auth.html', tMain=tData)

的{{场}}在HTML文件 'show_auth.html' 下面应该是动态更新：

<form action="{{ url_for('submit_token') }}" method=post> 
    <div id="Main" class="tabcontent" style="display:block" > 
    <div class="PanelWrapper" > 
     <div class="pageTitle">WAN</div> 
     <div class="layout"> 
     <div class="col"> 
      <table frame="void" rules="none"> 
      <tbody> 
       {%for key, field in tMain.items() %} 
       <tr> 
       <td class="attrLabel" valign="middle" nowrap>{{key}}</td> 
       <td class="attrLabel" valign="middle">:&nbsp;</td> 
       <td>{{field}}</td> 
       </tr> 
       {% endfor %} 
      </tbody> 
      </table> 
     </div> 
... 
....

来源

2016-11-25 nitin_cherian

您将需要两个东西：AJAX请求的路由将返回格式为JSON的数据（对于Flask的jsonify函数应该很容易）。

一旦你的路线设置，你需要使用AJAX调用来调用它。使用jQuery它感觉很轻松（但你也可以用vanilla JS来做）。

<script> 
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 
    (function(){ 
     $.getJSON(
      $SCRIPT_ROOT+"/_stuff", // Your AJAX route here 
      function(data) { 
       // Update the value in your table here 
      } 
     ); 
     setTimeout(arguments.callee, 10000); 
    })(); 
</script>

在上面的代码片段，您将需要指定AJAX路线的路径，并与data值做的事情。对于快速测试，您可以简单地console.log(data)并检查返回的数据是否正常。

注意上面的代码片段使用了一个匿名函数，将获取你的数据每10秒（10000毫秒）。

我希望这将有助于

文档：
Ajax with Flask
jQuery.getJSON

来源

2016-11-25 13:50:02 Depado

答案是真正有用的和工作的罚款。必须结合Depado的答案在这里[链接] http://stackoverflow.com/questions/15721679/update-and-render-a-value-from-flask-periodically完成我的需要。谢谢德帕多！ –

Flask + AJAX + Jquery + JINJA动态更新HTML表

回答

相关问题