如何在 flask 中使用 for 循环自动刷新 html 表字段？

Question

Flask 中 function 的片段。 我正在生成所有职位的列表，然后将它们发送过来。 然后使用 jinja 和 for 循环填充表格。

@app.route("/")
def table_list():
   position_list=["a","b","c","d"]
   return render_template("index.html",
              position=position_list)

这是在主页上，需要每隔几秒自动刷新一次，因此 position 值将得到更新。

HTML 表：

 <table>
   <tbody id="data">
        {% for pos1, pos2, pos3, pos4 in position %}
           <tr id="data_table">
               <td id="pos1"> {{ pos1 }} </td>
               <td id="pos2"> {{ pos2 }} </td>
               <td id="pos3"> {{ pos3 }} </td>
               <td id="pos4"> {{ pos4 }} </td>
       {% endfor %}
    </tbody>
</table>

如何使用 JS仅刷新表中的值，并每隔几秒钟自动刷新一次？

Answer 1

您将不得不更改多项内容才能完成这项工作。

1. 将端点分为 html 端点和 Web 服务端点。

    @app.route("/table_list")
    def table_list():
        return render_template("index.html")
    
    @app.route("/get_list")
    def get_list():
        position_list = ["a", "b", "c", "d"]
        return make_response({"output": position_list})

2. 更改表的 html

    <table>
        <tbody id="data">
        <tr id="data_table">
        </tr>
        </tbody>
    </table>

3. 更改 html 模板以继续调用 get_list 并刷新 html

    </body>
    
    <script>
        setInterval(function () {
            let myRequest = new Request('/get_list');
            fetch(myRequest).then(response => response.json()).then(function (data) {
                let data_table = document.getElementById("data_table");
                data_table.innerHTML = "";
                for (let d in data['output']) {
                    data_table.innerHTML += `<td>${data['output'][d]}</td>`
                }
            });
        }, 1000);
    </script>

</html>