// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'api/data', true);

// 设置回调函数
xhr.onload = function() {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    populateTable(data);
  } else {
    console.error('请求失败: ' + xhr.status);
  }
};

// 发送请求
xhr.send();

// 填充表格函数
function populateTable(data) {
  var table = document.getElementById('dataTable');
  var tbody = table.querySelector('tbody') || table.createTBody();
  tbody.innerHTML = ''; // 清空现有内容
  
  data.forEach(function(item) {
    var row = tbody.insertRow();
    Object.keys(item).forEach(function(key) {
      var cell = row.insertCell();
      cell.textContent = item[key];
    });
  });
}

$.ajax({
  url: 'api/data',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    var tableBody = $('#dataTable tbody');
    tableBody.empty();
    
    $.each(data, function(index, item) {
      var row = $('<tr>');
      $.each(item, function(key, value) {
        row.append($('<td>').text(value));
      });
      tableBody.append(row);
    });
  },
  error: function(xhr, status, error) {
    console.error('请求失败: ' + error);
  }
});

fetch('api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json();
  })
  .then(data => {
    const tableBody = document.querySelector('#dataTable tbody');
    tableBody.innerHTML = '';
    
    data.forEach(item => {
      const row = document.createElement('tr');
      Object.values(item).forEach(value => {
        const cell = document.createElement('td');
        cell.textContent = value;
        row.appendChild(cell);
      });
      tableBody.appendChild(row);
    });
  })
  .catch(error => {
    console.error('请求失败:', error);
  });