Question

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

Flask Code如下：

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

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

HTML文件中的{{field}}＆＃39; show_auth.html＆＃39;下面应该动态更新：

<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＆＃39; 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

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

1 个答案: