使用 JavaScript 实现 JSON 数据自动更新 (无需刷新页面)-php教程-PHP中文网

使用 JavaScript 实现 JSON 数据自动更新 (无需刷新页面)

花韻仙語

发布： 2025-07-07 17:08:02

原创

376人浏览过

使用 javascript 实现 json 数据自动更新 (无需刷新页面)

本文将介绍如何使用 JavaScript 实现 JSON 数据的自动更新，而无需刷新整个页面。通过定时从服务器获取最新的 JSON 数据，并更新 HTML 页面上的相应元素，可以为用户提供动态、实时的信息展示，从而优化用户体验。本文将提供详细的代码示例和步骤，帮助你快速实现这一功能。

实现原理

核心思想是使用 setInterval() 函数定时执行一个函数，该函数负责从服务器获取 JSON 数据，然后更新页面上的相应元素。 setInterval() 函数接受两个参数：要执行的函数和一个时间间隔（以毫秒为单位）。

具体步骤

HTML 结构: 首先，确保你的 HTML 结构中有一个容器，用于显示 JSON 数据。例如，一个 div 元素：
```
<div id="json-data-container"></div>
```
登录后复制
JavaScript 代码: 接下来，编写 JavaScript 代码来获取 JSON 数据并更新 HTML。以下是一个示例：

立即学习“Java免费学习笔记（深入）”；

Ex驾校预约小程序
传统驾校预约方式步骤繁琐，效率低下，随着移动互联网科技和5G的革新，驾校考试领域迫切需要更加简洁、高效的预约方式，便捷人们的生活。因此设计基于微信小程序的驾校预约系统，改进传统驾校预约方式，实现高效的驾校学校预约。采用腾讯提供的小程序云开发解决方案，无须服务器和域名。驾校预约管理：开始/截止时间/人数均可灵活设置，可以自定义客户预约填写的数据项驾校预约凭证：支持线下到场后校验签到/核销/二维码自

0

查看详情
```
function updateData() {
  // 替换为你的 JSON 数据 URL
  const url = 'https://docs.google.com/spreadsheets/d/xxxxxxxxxx/gviz/tq?tqx=out:json&tq&gid=0';

  fetch(url)
    .then(response => response.text())
    .then(data => {
      // 处理 JSON 数据
      const jsonData = JSON.parse(data.substring(47).slice(0, -2));
      const tableHtml = generateTable(jsonData);

      // 更新 HTML 元素
      document.getElementById('json-data-container').innerHTML = tableHtml;
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

function generateTable(jsonData) {
    let table = '<table><tr>';
    jsonData.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>');
    table += '</tr>';
    jsonData.table.rows.forEach(ligne => {
        table += '<tr>';
        ligne.c.forEach(cellule => {
            try {
                let valeur = cellule.f ? cellule.f : cellule.v;
                table += '<td>' + valeur + '</td>';
            } catch (e) {
                table += '<td></td>';
            }
        });
        table += '</tr>';
    });
    table += '</table>';
    return table;
}

// 设置定时器，每 3 分钟 (180000 毫秒) 更新一次数据
setInterval(updateData, 180000);

// 首次加载时立即更新数据
updateData();
```
登录后复制
代码解释:
- updateData() 函数：负责获取 JSON 数据，解析数据，并更新 HTML 元素的内容。
- fetch(url)：使用 fetch API 发送 HTTP 请求，获取 JSON 数据。
- .then(response => response.text())：将响应转换为文本格式。由于Google Sheet返回的JSON数据格式略有不同，需要进行处理，因此使用data.substring(47).slice(0, -2)来提取有效JSON部分。
- .then(data => { ... })：处理 JSON 数据，并更新 HTML 元素。
- document.getElementById('json-data-container').innerHTML = tableHtml;：将生成的 HTML 插入到 json-data-container 元素中。
- setInterval(updateData, 180000);：每 180000 毫秒（3 分钟）调用 updateData() 函数，实现定时更新。
- updateData();：在页面加载时立即调用 updateData() 函数，确保首次加载时也能显示数据。
- generateTable(jsonData): 将JSON数据转换为HTML表格。
注意事项:
- 错误处理: 在 fetch 请求中添加 catch 块，以便处理网络错误或其他异常情况。
- 数据格式: 确保你的 JSON 数据格式与你的 JavaScript 代码兼容。
- 性能优化: 如果 JSON 数据量很大，可以考虑使用分页或其他优化技术来提高性能。
- 跨域问题: 如果你的 JSON 数据位于不同的域名下，可能会遇到跨域问题。你需要配置服务器以允许跨域请求（CORS）。
- 用户体验: 在数据加载期间，可以显示一个加载指示器，以提高用户体验。