如何使用 php 或 javascript 在不刷新页面的情况下自动更新 JSON 数据？

Posted 2023-05-08

【中文标题】如何使用 php 或 javascript 在不刷新页面的情况下自动更新 JSON 数据？

【英文标题】：How to automatically update JSON data without page refresh using php or javascript?

【发布时间】：2021-12-07 07:39:11

【问题描述】：

我有一个谷歌表，其中股票数据每 3 分钟更新一次。我有一个页面，可以在其中查看 html 表中的数据。但该数据不会自动更改。我必须刷新页面，否则我必须设置元<meta http-equiv="refresh" content="30"> 以定期刷新页面。

我希望 必须自动更新来自 JSON 的数据 页面刷新。这是我的代码。

JSON 对象链接

https://docs.google.com/spreadsheets/d/xxxxxxxxxx.json

显示json数据的div

<div id="json">json here</div>

Javascript 获取和显示 json 数据

<script type="text/javascript">
var id = 'xxxxxxxxxxxxxxxxxxxx';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
  );
function myItems(jsonString)
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => 
    table += '<tr>'
    ligne.c.forEach(cellule => 
        tryvar valeur = cellule.f ? cellule.f : cellule.v
        catch(e)var valeur = ''
        table += '<td>' + valeur + '</td>'
      
    )
    table += '</tr>'
    
  )
  table += '</table>'
  return table

</script>

我知道一个 js 库 kickout js，但我无法使用 kickout js 实现并获得想要的结果。那么如何实现无需刷新页面即可自动更新 JSON 数据的表格？

提前谢谢你。

【问题讨论】：

你试过setInterval吗？

我收到“1 个未捕获（承诺中）类型错误：无法在 'Window' 上执行 'fetch'：需要 1 个参数，但只有 0 个存在。” setInterval(fetch, 5000); fetch(url)

【参考方案1】：

您必须使用 setInterval 定期获取新数据并更新表格行。您可以为每一行分配一个唯一 ID，并在定期运行的函数中更新它们。

setInterval(function() 
    // fetch data here and update rows.
, 180000);