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

【问题标题】：How to automatically update JSON data without page refresh using php or javascript?如何使用 php 或 javascript 在不刷新页面的情况下自动更新 JSON 数据？
【发布时间】：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 => {
        try{var 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)

标签： javascript php jquery json

【解决方案1】：

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

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

【讨论】：