Python Flask使用Ajax从Mysql动态呈现记分板

我想制作一个动态记分板，将数据从MySQL查询导入html表。这是我的疑问：

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），

），我可以使用regex

该表将使用一些引导类，我想象它是这样的：

<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>

名称
分数
{{name1}
{{score1}}
{{name2}}
{{score2}}
{{name3}}
{{score3}}

---

我需要做什么，将通过查询检索到的MySQL数据插入表中。此外，表的行数应根据查询中的条目数增加。

显然有很多方法可以做到这一点。最简单的方法是使用javascript创建DOM节点，并将它们添加到页面中。这可能是你找到目标的最短路径。当您试图以更复杂的方式更改DOM时，这种技术可能会很快变得复杂。例如，您可能还希望删除大于某个年龄的分数。在ajax调用的成功处理程序中协调这一切可能会变得有点难以维护

处理这种情况的更现代的方法是使用javascript库为您处理DOM操作。一些流行的例子有Angular、React和Ember。它们可以帮助您以一种更易于维护的方式构造代码，并且随着复杂性的增加，您也更容易理解

很明显你在做一个权衡。这些库可能使问题的某些方面变得更容易，但现在您已经学会了如何使用javascript库。您可能会发现，对于您正在尝试做的事情，简单地手动附加DOM节点比潜入javascript库更简单

编辑：

DOM节点指的是由HTML标记创建的内容。例如，

Hello

创建一个段落dom节点。通常，浏览器在加载页面时会处理此问题，但您可以使用javascript更改浏览器创建的内容。要了解我的意思，请打开浏览器控制台（在firefox中：右键单击->检查元素，然后单击控制台）。然后键入以下内容

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

---

向下滚动到页面底部，您会看到您已将

HELLO

添加到页面底部。当您从ajax调用接收数据时，您可以执行类似的操作，或者向页面添加内容（DOM节点），或者像我前面提到的那样删除它们。

您可以更新您的帖子，使其提出明确的问题吗？抱歉，忘了这一小部分，哈它是用于短期项目的，因此不需要删除，它仍然像我解释的那样简单，我现在来看看DOM节点。我想我可能没有很好地解释我自己。请参阅我在上面所做的编辑。如何将javascript链接到python变量？您必须在ajax调用中访问它。这已开始偏离问答形式。你想试着在聊天中多说点什么吗？我很乐意，但能等一会儿吗？我现在正在做饭：）