当导入的 *.json 值更改时自动更新 HTML 内容答案

【问题标题】：Updating automatically an HTML content when the imported *.json values are changed当导入的 *.json 值更改时自动更新 HTML 内容
【发布时间】：2022-02-02 18:05:49
【问题描述】：

我的 HTML 代码导入了 LOCAL 但 UPDATABLE *.json 内容，并且必须在更新 *.json 文件时自动更新。

这是 *.HTML 代码：

<html>
    <head>
        <script type="text/javascript" src="sample.json"></script>
        <script type="text/javascript" >

            function load() {

                setInterval(function () {

                var mydata = JSON.parse(data);
                var div = document.getElementById('data');

                div.innerHTML = mydata[0].location.altitude;

            }, 100);}

        </script>
    </head>
    <body onload="load()">
        <div id="data">

        </div>
    </body>
</html>

改编后的 sample.json 文件为：

data = '[{"location": {"altitude": 40}}]';

我只想看到 altitude 在 sample.json 文件更新时在浏览器 (HTML) 中发生变化。

现在 HTML 可以工作，但只有 ONCE，我想让它动态化。

我应该怎么做才能使函数setInterval正常工作？或者这个函数可能只适用于本地更改，而不适用于外部更改。

谢谢，萨德克

【问题讨论】：

"并且 sample.json 文件是" — 那是 JavaScript，而不是 JSON。不要给它一个.json 文件扩展名。
我没明白你的意思，但这正是一个 JSON 文件，而不是 Javascript 代码。
data = '[{"location": {"altitude": 40}}]'; 不是 JSON。它是 JavaScript。如果是 JSON，那将是 just [{"location": {"altitude": 40}}]
Ups，所以我这样做了，因为有人提到由于安全原因，禁止从 HTML 访问本地 *.json 文件，因此您必须触摸该文件以使其可访问。我不知道这使它成为 js！

标签： html json

【解决方案1】：

如果您希望浏览器从 URL 偶数区间获取数据，那么您需要编写代码以在区间内从 URL 获取数据。例如与the Fetch API。（此时您应该将其设为 JSON 而不是 JS）。

但是 HTTP 并不快。您不想每 100 毫秒通过 HTTP 轮询一次。考虑在数据发生变化时使用Websockets从服务器推送数据，而不是轮询。

【讨论】：

谢谢，昆汀。 *.json 文件在我的 PC 中本地存储频率很高。
FETCH 函数对我不起作用，Uncaught TypeError: Failed to fetch
如果您想轮询数据或使用 websockets，那么您需要一个可以让您这样做的环境。将 Web 服务器添加到您的项目中。