Question

我正在构建一个用于对人进行排名的程序（不要问），并且我认为我正面临初学者的问题-我有一个用python生成的期望值，我希望将其用作html表的内容。

该表是排行榜，是通过找到得分最高（obv）的人确定的。我列出了前10名人员，现在我希望将其放入html表中。理想情况下，我想编辑实际的html文件，以便当一个用户生成表时将其保存给下一个。（我将generateTable函数更改为按钮）

我尝试使用没有运气的美丽汤，我阅读了文档，但是似乎找不到解决方法。

基本上，我只是试图用ajax调用python变量。但是，我可以相反。如果您不知道，我是编程新手。

我正在本地网络上运行python烧瓶服务器，并且我将Google表格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'

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

在python变量的相应单元格中将字符串制成python变量时，任何帮助将不胜感激。

str（排行榜）看起来像：[[26316，'名称'），（6250，'名称'），（6667，'名称'），（6250，'名称'），（4545，'名称'），（36364，“名称”），（46154，“名称”）]

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

Answer 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)
        }
    });
}

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

1 个答案: