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'中的{{field}}应该动态更新：

<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毫秒）会提取一次数据。

我希望这会有所帮助

文档：
带有Flask jQuery.getJSON的Ajax