尝试使用 python 数据编辑 html 表数据（ajax get 方法？）答案

【问题标题】：Trying to edit html table data with python data (ajax get method?)尝试使用 python 数据编辑 html 表数据（ajax get 方法？）
【发布时间】：2019-03-31 11:06:01
【问题描述】：

我正在构建一个用于对人进行排名的程序（不要问），我想我正面临一个初学者问题——我在 python 中生成了一个期望的值，我希望制作一个 html 表格的内容。

该表是一个排行榜，通过找到得分最高的人（obv）来确定。我有一份前 10 名的名单，我现在希望将其放入一个 html 表格中。理想情况下，我希望它能够编辑实际的 html 文件，这样当一个用户生成表格时，它会将其保存到下一个。（我将generateTable函数改成按钮）

我尝试过使用漂亮的汤，但没有成功，我阅读了文档，但似乎找不到解决方案。

基本上，我只是想用 ajax 调用一个 python 变量。但是，我可以反过来。如果你不知道，我是编程新手。

我在本地网络上运行 python 烧瓶服务器，并且我使用 google sheet api 作为临时数据库。

server.py:

@app.route("/leader", methods=['POST'])
def leader():
    name_and_score = []
    length = int(changedata.next_available_row(2))
    for x in range(2,length):
        time.sleep(1.1)
        name_and_score.append((int(changedata.index(x,7)), str((changedata.index(x,1)))))
    print str(name_and_score) + ' <--- This is everybody'
    leaderboard = nlargest(10, name_and_score)
    return str(leaderboard) + ' <--- These are top 10'

排行榜.html

<html>
<head>
<link rel="stylesheet" href="static/css/scoreboard.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    function generateTable() {
        $.ajax({
            method: 'POST',
            url: "http://10.0.1.36:5000/leader",
            success: function(response) {
                console.log(response)
             },
            error: function(response) {
                console.error(response)
            }
        });
    }
    window.onload=generateTable;

</script>
<p class = holder>Boys</p>

<table style="width:30%">
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td id = 'person1'> Person </td>
    <td id = 'person1_score'>45000</td>
  <tr>
    <td id = 'person2'> Person </td>
    <td id = 'person2_score'>45000</td>
  </tr>
      <tr>
    <td id = 'person3'> Person </td>
    <td id = 'person3_score'>50000</td>
  </tr>
</table>

</body>
</html>

如果在 html 中将 python 变量设置为相应单元格中的字符串，将不胜感激。

str(leaderboard) 看起来像：[(26316, 'Name'), (6250, 'Name'), (6667, 'Name'), (6250, 'Name'), (4545, 'Name') , (36364, '姓名'), (46154, '姓名')]

我省略了名称，但它们是不同的值。

【问题讨论】：

标签： javascript python jquery html ajax

【解决方案1】：

使用 json.dumps() 而不是 str(leaderboard)，这样你就可以在 HTML 中解析它。

return make_response(json.dumps(leaderboard),200)

给你的桌子一些 id：

<table id="myleaderboard" style="width:30%">...</table>

然后，解析它并填充表格：

function generateTable() {
    $.ajax({
        method: 'POST',
        url: "http://10.0.1.36:5000/leader",
        success: function(response) {
            console.log(response);
            try {
              let res = JSON.parse(response);
              let table = document.getElementById("myleaderboard");
              //clear table
              table.innerHTML = "";
              //populate
              for (let i = 0;i < res.length; i++) {
                 const tr = document.createElement("tr");
                 const td1 = document.createElement("td");
                 const td2 = document.createElement("td");
                 td1.innerHTML = res[i][0]; //score
                 td2.innerHTML = res[i][1]; //name
                 tr.appendChild(td1);
                 tr.appendChild(td2);
                 table.appendChild(tr);
              }
            } catch(e){}
         },
        error: function(response) {
            console.error(response)
        }
    });
}

【讨论】：

非常感谢您的回复。我按照您的要求编辑了帖子。但是，当我尝试运行此代码时，我收到错误“AttributeError：'list' object has no attribute 'to_json''。我怀疑这与列表排行榜是列表列表有关。我现在会尝试解决它并让你知道。非常感谢！
没关系。我以为你在使用 pandas 来处理 nlargest()。最后的编辑应该适合你。使用 json.dumps()
好的，这在生成表格时起作用，但是表格中的所有值都是“未定义的”。我认为这与试图获得名称和分数的行有关。（.name 和 .score），因为我认为属性 score 和 name 没有定义。
td1.innerHTML = res[i][0]; //得分 td2.innerHTML = res[i][1]; //名称