Блог

Главная - Вопросы по программированию - Попытка отредактировать данные таблицы html с помощью данных python (метод ajax get?)

Попытка отредактировать данные таблицы html с помощью данных python (метод ajax get?)

#javascript #python #jquery #html #ajax

#javascript #python #jquery #HTML #ajax

Вопрос:

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

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

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

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

Я запускаю сервер python flask в своей локальной сети и использую Google sheets 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 строки в соответствующей ячейке в html.

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

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

Ответ №1:

Используйте 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)
        }
    });
}

Комментарии:

1. Большое спасибо за ваш ответ. Я отредактировал сообщение, как вы просили. Однако, когда я попытался запустить этот код, я получил сообщение об ошибке ‘AttributeError: объект ‘list’ не имеет атрибута ‘to_json». Я подозреваю, что это связано с тем, что таблица лидеров списка представляет собой список списков. Я попытаюсь решить это сейчас и дам вам знать. Большое спасибо!

2. все в порядке. я думал, вы используете pandas для nlargest (). последнее редактирование должно сработать для вас. использование json.dumps()

3. Хорошо, это сработало при создании таблицы, однако все значения в таблице ‘undefined’. Я думаю, это связано со строками, пытающимися получить имя и оценку. (.name и .score), поскольку я не думаю, что оценка атрибута и имя были определены.

4. td1.innerHTML = res[i][0]; //оценка td2.innerHTML = res[i][1]; //имя