我如何能够在每次更新 JSON 文件时读取它而不刷新网页答案

【问题标题】：How I would be able to read my JSON file every time it's updated without refreshing the web page我如何能够在每次更新 JSON 文件时读取它而不刷新网页
【发布时间】：2021-09-06 11:12:08
【问题描述】：

我有一个持续更新 JSON 文件的服务器。我在下面设置的代码 (javascript) 读取 JSON 文件并将其显示给客户端总是刷新页面。

我想知道如何在每次更新 JSON 文件时读取它而不刷新网页。

从我查找的内容来看，我似乎必须使用 AJAX 来完成这项工作。但找不到太多其他东西。或者我应该对我的 JSON 文件进行任何更新？

这是我用来从 archive.json 文件中获取数据的 index.html 代码：

<script>

fetch('archive.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (data) {
        appendData(data);
    })
    .catch(function (err) {
        console.log('error: ' + err);
    });

function appendData(data) {
    console.log(data.velas.length);
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.velas.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Tempo: ' + data.velas[i].tempo;
        mainContainer.appendChild(div);
    }
}

</script>

感谢您的帮助！

【问题讨论】：

标签： javascript json ajax refresh

【解决方案1】：

请承认我刷新它的错误不是因为 JSON 或 AJAX 代码......而是因为我在本地服务器上运行它。所以无论如何它都会刷新。

但阿迪尔森用计时器回应这个话题完成了我所需要的： https://stackoverflow.com/a/68090848/16179486

感谢大家的帮助！

【讨论】：

【解决方案2】：

希望我正确理解了您的问题。

document.querySelector('button').addEventListener('click',()=>{
   var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
  document.querySelector('.get').innerHTML=`${JSON.parse(this.responseText).ip}`
  };
}
xhttp.open("GET", "https://ipapi.co/json/", true);
xhttp.send();


})

<button>Get</button>
<div class="get">
</div>

【讨论】：

感谢您的帮助，但我认为问题可能出在我的 JSON 存档上……因为当它更新时，我的 html 仍会刷新。
我有fetch(url, { ... } 和.then((response) => { return response.json(); })。我该怎么办？现在我需要刷新页面以获取新值，但我不知道该谷歌搜索什么。我注释掉了这个// location.reload()，因为它会重新加载页面，并且我的动画会被刷新打断，这就是我注释掉它的原因。

【解决方案3】：

你可以试试这个，我已经在代码注释中解释了所有内容

<script>

const REFRESH_INTERVAL = 5; // 5 seconds
var mainContainer = document.getElementById("myData");

async function appendData() {
    // make the request
    const response = await fetch('archive.json');
    const data = await response.json();    

    // check the data response
    if(data == undefined && data == null) return
    
    // manipulate DOM
    var mainContainer = document.getElementById("myData");
    mainContainer.innerHTML = '' // clear the content of the previous mainContainer
    for (var i = 0; i < data.velas.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Tempo: ' + data.velas[i].tempo;
        mainContainer.appendChild(div);
    }
}

setInterval(() => { // send a request to server each 5 seconds (REFRESH_INTERVAL) <- you can change it here
   appendData()
}, REFRESH_INTERVAL * 1000)

</script>

【讨论】：

感谢您的帮助，但我认为问题可能出在我的 JSON 存档上……因为当它更新时，我的 html 仍会刷新。