Javascript 试图用python数据编辑html表数据（ajax获取方法？）

我正在构建一个为人们排名的程序（不问），我想我面临一个初学者的问题——我有一个用python生成的期望值，我希望它成为html表的内容

该表是一个领导委员会，由得分最高的人（obv）决定。我有一个前10名的名单，我现在希望把它放到一个html表格中。理想情况下，我希望这样可以编辑实际的html文件，这样当一个用户生成表时，它会将其保存到下一个用户。（我会将generateTable功能更改为按钮）

我尝试过使用美丽的汤，但运气不佳，我阅读了文档，但似乎找不到解决方案

基本上，我只是尝试用ajax调用python变量。然而，我可以做相反的事情。如果你不知道的话，我是编程新手

我在本地网络上运行一个python flask服务器，并使用GoogleSheetsAPI作为临时数据库

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'

@app.route（“/leader”，方法=['POST']））
def leader（）：
姓名和分数=[]
长度=int（changedata.next_可用_行（2））
对于范围内的x（2，长度）：
时间。睡眠（1.1）
name_和_score.append（（int（changedata.index（x，7））），str（（changedata.index（x，1щ）！）
print str（name_and_score）+'使用json.dumps（）代替str（leadboard），这样您就可以在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)
        }
    });
}

函数generateTable（）{
$.ajax({
方法：“POST”，
url:“http://10.0.1.36:5000/leader",
成功：功能（响应）{
控制台日志（响应）；
试一试{
让res=JSON.parse（响应）；
let table=document.getElementById（“MyLeadBoard”）；
//清理桌子
table.innerHTML=“”；
//填充
for（设i=0；itd1.innerHTML=res[i][0]；//分数
td2.innerHTML=res[i][1]；//名称
tr.appendChild（td1）；
tr.appendChild（td2）；
表1.儿童（tr）；
}
}捕获（e）{}
},
错误：函数（响应）{
控制台错误（响应）
}
});
}
非常感谢您的回复。我按照你的要求编辑了这篇文章。然而，当我试图运行这段代码时，我得到了错误'AttributeError:'list'对象没有属性'to_json'。我怀疑这与排行榜是一个列表有关。我将尝试现在解决它，并让你知道。非常感谢！没关系。我还以为你在用熊猫来制作NLAGEST（）。最后一次编辑应该适合您。使用json.dumps（）可以生成表，但是表中的所有值都是“未定义的”。我认为这与那些试图得到名字和分数的队伍有关。（.name和.score），因为我认为没有定义属性score和name.td1.innerHTML=res[I][0]//得分td2.innerHTML=res[i][1]//名称
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)
        }
    });
}