Попытка отредактировать данные таблицы HTML с помощью данных Python (ajax get метод?) - PullRequest
0 голосов
/ 31 марта 2019

Я создаю программу для ранжирования людей (не спрашиваю), и я думаю, что столкнулся с проблемой новичков - у меня есть желаемое значение, сгенерированное в python, которое я хочу сделать содержимым HTML-таблицы.

Таблица представляет собой таблицу лидеров, которая определяется путем нахождения человека с наибольшим количеством очков (obv). У меня есть список из 10 лучших людей, и теперь я хочу поместить это в таблицу HTML. В идеале я хотел бы, чтобы это отредактировало фактический HTML-файл, чтобы, когда один пользователь генерирует таблицу, он сохранял ее для следующего. (Я изменю функцию generateTable на кнопку)

Я безуспешно пытался использовать красивый суп, я прочитал документацию, но не смог найти решение.

По сути, я просто пытаюсь вызвать переменную python с помощью ajax. Я могу сделать обратное, однако. Я новичок в программировании, если вы не можете сказать.

Я использую сервер флеш-памяти Python в своей локальной сети и использую API google sheet в качестве временной базы данных.

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 строки в соответствующей ячейке в html.

str (таблица лидеров) выглядит следующим образом: [(26316, «Имя»), (6250, «Имя»), (6667, «Имя»), (6250, «Имя»), (4545, «Имя») , (36364, «Имя»), (46154, «Имя»)]

  • Я опустил имена, но они являются разными значениями.

1 Ответ

0 голосов
/ 31 марта 2019

Используйте json.dumps () вместо str (таблица лидеров), чтобы вы могли разобрать его обратно в HTML.

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

дайте вашему столу некоторый идентификатор:

<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)
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...