如何使用 JS 获取 flask 变量的刷新值并每 30 秒显示在 HTML 模板中？

Question

这是一个停车应用程序，每 30 秒刷新一次可用的停车位，而无需刷新页面。

这是带有路由和渲染模板的 my.py

@views.route('/')
def home():
    while True:
        try:
            token=getToken()
            if(token!='null' or token!=''):
                plazas=getInfo(token,parkingID)
        except:
            print('Error en la conexion')
            time.sleep(secs)      
                return render_template("home.html", plazas=plazas)

我的 HTML 是：

  <script  src="{{ url_for('static', filename='js/main.js') }}"></script>
 <script type="text/javascript">
    myVar = setInterval(refresh,30000,{{plazas}});
  </script>
</head>
<title>Home</title>
</head>
    <body>
        <table>
            {% for parking in parkings %}
                <tr>
                    <td class="par"><img src={{parking.image}} alt="img"></td>
                    <td class="nombre">{{parking.nombre}}</td>
                    {% if plazas|int >= (totalplazas*30)/100 %}
                    <td class="num" style="color:#39FF00">
                    {{plazas}}</td>
                    {% elif plazas|int < 1%}
                    <td class="num" style="color:red"><p class="an">COMPLETO</p></td>
                    {% elif plazas|int <= (totalplazas*10)/100%}
                    <td class="num" style="color:red">
                    {{plazas}}</td>
                    {% else %}
                    <td class="num" style="color:yellow">
                    {{plazas}}</td>
                    {% endif %}
                    <td class="dir"><img src={{parking.direccion}} alt="img"></td>
                </tr>
            {% endfor %}
        </table>
    </body>
</html>

还有我的 JS：

var elements = document.getElementsByClassName("num");
function refresh(pl){
    elements.innerHTML = pl;
}

我的问题是 {{plazas}} 变量总是采用初始值并且不会每 30 秒更新一次，即使我在 my.py 中使用 while true: 循环也是如此。 有什么帮助吗？

Answer 1

您的问题似乎是定期更新呈现的 DOM。 您可能需要 JavaScript 来处理它。 有很多框架可以有效地实现这一点。 考虑寻找流行的解决方案，例如ReactJS或VueJS 。

Answer 2

一个简单的解决方案是通过使用await fetch()从 javascript 获取数据来获取数据。 然后，您可以使用setInterval()设置更新程序。

Flask

@app.route('/refresh')
def refresh();
  try:
    token=getToken()
    if(token!='null' or token!=''):
      plazas=getInfo(token,parkingID)
  except:
    return "Error refreshing!"

Javascript

var element = document.getElementsByClassName("num")

async function reload() {
  // make a request to reload
  const promise = await fetch("/refresh")
  // get the text from the request, alternatively you can also use .json() to 
  // retrieve json
  const text = await promise.text()
  element.innerHTML = text
}

// refresh every 30 seconds
window.onload = setInterval(reload, 30000)

如何使用 JS 获取 flask 变量的刷新值并每 30 秒显示在 HTML 模板中？

问题描述

2 个解决方案

解决方案1
0 2022-12-01 12:18:37

解决方案2
0 已采纳 2022-12-01 23:39:08

如何使用 JS 获取 flask 变量的刷新值并每 30 秒显示在 HTML 模板中？

问题描述

2 个解决方案

解决方案1 0 2022-12-01 12:18:37

解决方案2 0 已采纳 2022-12-01 23:39:08

解决方案1
0 2022-12-01 12:18:37

解决方案2
0 已采纳 2022-12-01 23:39:08