Как заполнить таблицу с помощью ajax?

@craig.emmerich 

Для заполнения таблицы с помощью AJAX (асинхронного JavaScript и XML) можно использовать следующий подход:

Шаг 1: Создать таблицу в HTML

В HTML-коде нужно создать таблицу с определенными заголовками столбцов и пустыми ячейками данных. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

  
    
      ID
      Имя
      Фамилия
    
  
  
    
  

Шаг 2: Написать JavaScript-код для отправки запроса по AJAX

С помощью JavaScript нужно написать функцию, которая будет отправлять AJAX-запрос на сервер и получать данные для заполнения таблицы. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

function fillTable() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
      for (var i = 0; i < data.length; i++) {
        var row = table.insertRow(i);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = data[i].id;
        cell2.innerHTML = data[i].firstName;
        cell3.innerHTML = data[i].lastName;
      }
    }
  };
  xhttp.open("GET", "путь_к_файлу_с_данными", true);
  xhttp.send();
}

В этом примере мы создаем объект XMLHttpRequest и устанавливаем обработчик события onreadystatechange, который будет вызываться каждый раз, когда меняется состояние запроса.

Внутри обработчика мы проверяем, что запрос завершен (readyState == 4) и статус ответа равен 200 (this.status == 200). Затем мы конвертируем полученные данные из формата JSON в JavaScript-объект и проходимся по ним в цикле, добавляя новые строки в таблицу и заполняя ячейки данными.

В примере используется GET-запрос для получения данных с сервера, но вы также можете использовать POST или другие методы, в зависимости от ваших требований.

Шаг 3: Вызвать функцию для заполнения таблицы

Чтобы заполнить таблицу данными, нужно вызвать функцию fillTable(). Например, вы можете вызвать эту функцию при загрузке страницы или по нажатию кнопки.

Например, вариант запуска функции при загрузке страницы:

1
2
3
4
5

  window.onload = function() {
    fillTable();
  }

Таким образом, при загрузке страницы произойдет обращение к серверу через AJAX и данные будут добавлены в таблицу по мере получения ответов от сервера.