来自3个URLS的AJAX请求填充相同的表

基础概念

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过AJAX，网页应用程序能够异步地与服务器进行通信，即在不重新加载整个网页的情况下，更新部分网页内容。

类型

AJAX请求通常使用XMLHttpRequest对象或现代的fetch API来实现。

应用场景

实时搜索建议：用户在输入搜索词时即时显示建议列表。
动态内容更新：如新闻网站的最新文章更新。
表单验证：在用户提交表单前实时验证输入数据的有效性。

示例代码

以下是一个使用JavaScript的fetch API从三个不同的URL获取数据并填充到同一个表格中的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Table Population</title>
<style>
  table { width: 100%; border-collapse: collapse; }
  th, td { border: 1px solid black; padding: 8px; text-align: left; }
</style>
</head>
<body>

<table id="dataTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<script>
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Network response was not ok');
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    return [];
  }
}

async function populateTable() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const allData = await Promise.all(urls.map(fetchData));
  const combinedData = allData.flat();

  const tableBody = document.querySelector('#dataTable tbody');
  combinedData.forEach(item => {
    const row = tableBody.insertRow();
    row.insertCell().textContent = item.id;
    row.insertCell().textContent = item.name;
    row.insertCell().textContent = item.value;
  });
}

populateTable();
</script>

</body>
</html>