无需刷新即可显示和更新数据

Question

我想在一个简单的 HTML 页面上显示 json 文件中的信息，实时更新它而无需刷新页面。 我写了一个代码，但我不工作。 如果它有效，我不知道它是否会在不刷新页面的情况下更新数据。 我的错误在哪里？

例如.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>
<body>
<div id="myData"></div>
<script>
    fetch('data.json')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });
    function appendData(data) {
        var mainContainer = document.getElementById("myData");
        for (var i = 0; i < data.length; i++) {
            var div = document.createElement("div");
            div.innerHTML = 'Name: ' + data[i].name + ' ' +'Number: ' + data[i].number + ' ' +'Age: ' + data[i].age + ' ' +'Description: ' + data[i].description + ' ' +'Age: ' + data[i].age_float;
            mainContainer.appendChild(div);
        }
    }
</script>
</body>
</html>

数据.json

{
  "time": {
    "updated": "Sep 7, 2020 00:21:00 UTC",
    "updated_1": "2020-09-07T00:21:00+00:00",
    "updated_2": "Sep 7, 2020 at 16:13 BST"
  },
  "disclaimer": "Made by user...",
  "chartName": "Example",
  "exp": {
    "Steph": {
      "name": "STEPH",
      "number": "111",
      "age": "1",
      "description": "This is the first data",
      "age_float": 1111.1111
    },
    "Alex": {
      "name": "ALEX",
      "number": "2222",
      "age": "2",
      "description": "This is the second data",
      "age_float": 2222.2222
    },
    "Mitch": {
      "name": "MITCH",
      "number": "333",
      "age": "3",
      "description": "This is the third data",
      "age_float": 3333.3333
    }
  }
}

Answer 1

正如评论中提到的，您的问题仅与假设数据格式错误的代码有关（只有 console.log data.length 会证明它）

不，这不会触发页面重新加载。 您的代码将与 DOM API 一起使用，以便在您的数据在 fetch 回调中可用时（假设您的文件在 HTTP 服务器上的 html 文件中可用）操作已加载的几乎没有空的页面。

作为旁注，您可以在文档片段中执行附加操作，以便从 DOM 中构建元素并在一切准备就绪时进行附加操作。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>
  <body>
    <h1>test</h1>
    <div id="myData"></div>
    <script>
      fetch("data.json")
        .then((response) => response.json())
        .then(appendData)
        .catch(console.error);

      function appendData(data) {
        const dataFragment = document.createDocumentFragment();
        for (const user of Object.values(data.exp)) {
          dataFragment.appendChild(createUserElement(user));
        }
        document.getElementById("myData").appendChild(dataFragment);
      }

      function createUserElement(user) {
        const div = document.createElement("div");
        div.innerHTML = `
            name: ${user.name} number: ${user.number} age: ${user.age} description: ${user.description} age: ${user.age_float}
        `;
        return div;
      }
    </script>
  </body>
</html>

假设http-server在您的机器上可用，可以通过运行进行测试

http-server -p 8000 .

在您的工作目录中，然后访问http://localhost:8000/ex.html

Answer 2

您将需要一些刷新逻辑，因为此脚本每次页面刷新仅一次。 您应该将此代码包装在一个函数中，并使用按钮或setInterval()触发此代码。

无需刷新即可显示和更新数据

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-09-07 17:50:30

解决方案2
0 2020-09-07 17:56:13

无需刷新即可显示和更新数据

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-09-07 17:50:30

解决方案2 0 2020-09-07 17:56:13

解决方案1
0 已采纳 2020-09-07 17:50:30

解决方案2
0 2020-09-07 17:56:13