每 60 秒更新一次 HTML 表格

Question

我正在嘗試使用 ajax 調用在燒瓶應用程序上每 60 秒更新一次 HTML 表。 我對Flask和 jquery 很陌生，並遵循了這個類似的計算器溢出問題： Python Flask Refresh table every 60 seconds

但是我的表沒有顯示任何數據。

目前我的 app.py 文件設置如下：

import MySQLdb
import sshtunnel
from datetime import date
import json

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("nfl_template.html")

@app.route("/nfl")
def nfl():
                
    return render_template("nfl_template.html")


@app.route("/nfl_data")
def nfl_data():
        sshtunnel.SSH_TIMEOUT = 10
        sshtunnel.TUNNEL_TIMEOUT = 10
        data = ((),)
        with sshtunnel.SSHTunnelForwarder(
            ('ssh.pythonanywhere.com'),
            ssh_username='USER', ssh_password='***',
            remote_bind_address=('USER.mysql.pythonanywhere-services.com', 3306)
            ) as tunnel:
                connection = MySQLdb.connect(
                    user='USER',
                    passwd='***',
                    host='127.0.0.1', port=tunnel.local_bind_port,
                    db='USER$liveSports',
                )
            
                cursor = connection.cursor()
                query = ("""
                      SELECT * FROM nfl_data WHERE DATE(nfl_data.date)='{}'
                      """.format(str(date.today())))
                cursor.execute(query)
                data = cursor.fetchall()
        return json.dumps(data)

還有我的 nfl_template.html：

<!doctype html>
<html>
 <body>
 <script>
     setInterval(function() {
    $.ajax({
      type: "GET",
      url: "/nfl_data",
    })  .done(function( data ) {
        console.log(data);
        var tableHtml = '';
        for (row in data) {
          tableHtml += '<tr>';
          for (d in row) {
            tableHtml += '<td>' + d + '</td>';
          }
          tableHtml += '</tr>';
        }
        $("#table-box").html(tableHtml)
       }).fail(function(jqXHR, textStatus, errorThrown) {
         console.log(jqXHR, textStatus, errorThrown);
       });
      }, 1000 * 60); 
  </script>
    
    <table border="2" cellpadding="4" cellspacing="5" id="table-box">
        <th>Game Date</th>
        <th>Game Time</th>
        <th>Team 1</th>
        <th>Team 2</th>
        <th>Team 1 Score</th>
        <th>Team 2 Score</th>
        <th>Team 1 Odds</th>
        <th>Team 2 Odds</th>
        {% for row in data %}
            <tr>
            {% for d in row[:-2] %}
                <td>{{ d }}</td>
            {% endfor %}
            </tr>
        {% endfor %}
    </table>

 </body>
</html>

當我運行應用程序時，我得到一個頁面，只顯示表標題但沒有數據。 我知道 SQL 查詢是正確的，並且在我單獨測試時返回數據，但是使用 ajax 請求我沒有得到任何要顯示的數據。

如果我在 nfl 路由函數內運行 SQL 查詢並將數據作為參數傳遞給 render_template 數據顯示，但它不會每 60 秒更新一次表。

Answer 1

如果這實際上是您的整個模板，那么問題在於您沒有導入 jQuery，因此“$”函數不存在。 您需要添加：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

每 60 秒更新一次 HTML 表格

問題描述

1 個解決方案

解決方案1
1 已采納 2021-10-19 04:13:33

每 60 秒更新一次 HTML 表格

問題描述

1 個解決方案

解決方案1 1 已采納 2021-10-19 04:13:33

解決方案1
1 已采納 2021-10-19 04:13:33