正文

JavaScript轻松刷新表格，学会这3招让你的表格数据实时更新！

/0 浏览量
0704

在网页开发中，表格是展示数据的一种常见方式。然而，当数据需要实时更新时，传统的刷新页面方法就不再适用。本文将介绍三种简单易学的JavaScript技巧，帮助你轻松实现表格数据的实时更新。

1. 使用 setInterval() 定时刷新

setInterval() 函数是JavaScript中用于定时执行某个函数的常用方法。通过设置合适的间隔时间，你可以让表格定时刷新数据。

代码示例：

function fetchData() {
  // 假设fetchDataFromServer是一个异步函数，用于从服务器获取数据
  fetchDataFromServer().then(data => {
    // 清空表格内容
    document.getElementById('myTable').innerHTML = '';
    // 填充表格内容
    data.forEach(item => {
      const row = document.createElement('tr');
      row.innerHTML = `<td>${item.name}</td><td>${item.age}</td>`;
      document.getElementById('myTable').appendChild(row);
    });
  });
}

// 设置定时器，每5秒刷新一次数据
setInterval(fetchData, 5000);

2. 使用 WebSocket 实时接收数据

WebSocket是一种在单个TCP连接上进行全双工通讯的协议。通过WebSocket，你可以实时接收服务器推送的数据，并更新表格。

代码示例：

const socket = new WebSocket('ws://example.com/data');

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 清空表格内容
  document.getElementById('myTable').innerHTML = '';
  // 填充表格内容
  data.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `<td>${item.name}</td><td>${item.age}</td>`;
    document.getElementById('myTable').appendChild(row);
  });
};

3. 使用 AJAX 定时请求数据

AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下与服务器交换数据的技巧。通过设置合适的请求间隔，你可以实现表格数据的定时更新。

代码示例：

function fetchData() {
  // 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();
  // 设置请求类型、URL和异步方式
  xhr.open('GET', 'data.json', true);
  // 设置请求完成后的回调函数
  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      // 清空表格内容
      document.getElementById('myTable').innerHTML = '';
      // 填充表格内容
      data.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `<td>${item.name}</td><td>${item.age}</td>`;
        document.getElementById('myTable').appendChild(row);
      });
    }
  };
  // 发送请求
  xhr.send();
}

// 设置定时器，每5秒刷新一次数据
setInterval(fetchData, 5000);

通过以上三种方法，你可以轻松实现表格数据的实时更新。在实际应用中，可以根据具体需求选择合适的方法。希望本文对你有所帮助！

-- 展开阅读全文 --