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

Question

我想动态显示端口状态。 我不想重新加载页面以查看新值。 我知道如何在 Python 中获取端口状态（使用uiApi() ）。 现在，我使用该值呈现一个模板并在 HTML 表中显示这些值。 如何使用 Flask 中的值不断更新表？ 我有可用的 AJAX 和 jquery。

Flask 代码如下：

    @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 的 Ajax
jQuery.getJSON