Flask動態使用Ajax從Mysql呈現記分板

我想製作一個動態記分板，將數據從MySQL查詢導入到html表中。這是我的查詢：Flask動態使用Ajax從Mysql呈現記分板

query = db().fa('SELECT name, score ' 
       'FROM `GIP-Schema`.scoreboard ' 
       'INNER JOIN `GIP-Schema`.user ON user_id = user.id ' 
       'ORDER BY score DESC')

順便fa()是fetchall()功能。如果需要過濾MySQL表示法（(item),(otheritem),），我可以使用正則表達式。

表會使用一些自舉類和我想象它看起來像這樣：

<table class="table table-bordered table-hover"> 
      <thead> 
       <tr> 
       <th>Name</th> 
       <th>Score</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>{{name1}}</td> 
       <td>{{score1}}</td> 
       </tr> 
       <tr> 
       <td>{{name2}}</td> 
       <td>{{score2}}</td> 
       </tr> 
       <tr> 
       <td>{{name3}}</td> 
       <td>{{score3}}</td> 
       </tr> 
      </tbody> 
     </table>

什麼我需要做的，插入與查詢到表中檢索到的MySQL數據。此外，該表應根據查詢中的條目數增加行數。

來源

2017-05-14 Thom Ernst

你可以更新你的文章，因此它提出了一個明確的問題？ – user2027202827

對不起，忘了那小部分，呵呵 –

顯然有很多方法可以做到這一點。最簡單的方法是使用javascript和append創建DOM節點到頁面。這可能是達到你想要的最短路徑。當您嘗試以更復雜的方式更改DOM時，這種技術可能會變得很快複雜。例如，也許你想刪除大於特定年齡的分數。在ajax調用的成功處理器中協調這一切可能變得有點難以維護。

處理這種類型的更現代的方法是使用JavaScript庫來爲您處理DOM操作。一些流行的例子是Angular，React和Ember。它們可以幫助您以更易於維護的方式構建代碼，隨着複雜性的增長，您可以更輕鬆地將自己的頭部包裹起來。

顯然你在這裏做一個折衷。這些庫可能會使問題的某些方面更容易，但是現在您已學會使用JavaScript庫。您很可能會發現，對於您嘗試執行的操作，只需手動添加DOM節點比深入JavaScript庫更簡單。

編輯：

DOM節點指的是通過HTML標籤創建的內容。例如，<p>Hello</p>創建段落dom節點。一般來說，瀏覽器在加載頁面時會處理這些內容，但是您可以使用javascript更改瀏覽器創建的內容。要了解我的意思，請打開瀏覽器控制檯（在Firefox中：右鍵單擊 - >檢查元素，然後單擊控制檯）。然後鍵入以下內容。

var p = document.createElement("p"); 
p.innerHTML("HELLO"); 
document.body.appendChild(p);

向下滾動到頁面的底部，您應該看到您添加HELLO到頁面的底部。當您從ajax調用接收數據並添加東西（DOM節點）到頁面，或者像前面提到的那樣刪除它們時，您可以做類似的事情。

來源

2017-05-14 16:28:44 user2027202827

這是短期項目，所以不需要刪除，它可以像我解釋的一樣簡單，現在我將看看DOM節點。 –

我想我可能沒有解釋得很清楚。請參閱我上面所做的修改。 – user2027202827

我該如何去關聯JavaScript到python變量？ –

Flask動態使用Ajax從Mysql呈現記分板

回答

相關問題