Flask + AJAX + Jquery + JINJA動態更新HTML表

Question

我想動態顯示端口狀態。我不想重新加載頁面以查看新的值。我知道如何獲得Python中的端口狀態（使用uiApi()）。現在，我使用該值呈現模板並在HTML表格中顯示值。我如何使用Flask的值持續更新表格？我有AJAX和jQuery可用。

燒瓶代碼如下給予：

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

Answer 1

您將需要兩個東西：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