如何使用PHP或JavaScript实现JSON数据无页面刷新自动更新

实现无刷新自动更新不需要额外引入KnockoutJS等第三方库，仅需对现有代码做少量调整即可：

核心思路 #

把原有单次执行的拉取渲染逻辑封装为可重复调用的函数，通过JS内置定时器周期性触发拉取新数据，直接更新页面DOM，全程不需要刷新整个页面。

修改后完整代码 #

<!-- 原有的展示容器保持不变 -->
<div id="json">json here</div>

<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;

// 封装表格更新逻辑
function updateTable() {
  fetch(url)
    .then(response => response.text())
    .then(data => {
      // 数据处理逻辑保持不变
      const processedData = data.substring(47).slice(0, -2);
      document.getElementById("json").innerHTML = myItems(processedData);
    })
    .catch(error => {
      // 请求出错时打印日志，不会清空原有表格
      console.error("数据更新失败：", error);
    });
}

// 页面加载时首次拉取数据
updateTable();
// 定时触发更新：间隔单位为毫秒，150000毫秒=2.5分钟，匹配你3分钟更新一次的库存频率
// 可根据需求自行调整间隔，不建议低于10000毫秒（10秒），避免接口被限制
setInterval(updateTable, 150000);

// 原有的表格渲染函数保持不变
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>

可选优化 #

如果觉得每次全量替换表格会产生闪烁，可以新增一个变量存储上一次拉取的格式化后数据，每次拿到新数据后先做对比，只有内容发生变化时才更新DOM，减少不必要的渲染。

内容的提问来源于stack exchange，提问作者Abdul Shaikh