javascript - Flask+AJAX+Jquery+JINJA动态更新HTML Table

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 毫秒)获取一次数据。

希望对你有帮助

文档:
Ajax with Flask
jQuery.getJSON