能否使用HTML每隔几秒读取并显示一个txt文件的内容？

Question

我有一个txt文件，每隔几秒钟就会更新新数据。它存储和生成在树莓派上，树莓派也将充当服务器。

我希望将其内容添加到用于显示的html代码中。

它应该在不手动重新加载页面的情况下更新。

有办法做到这一点吗？也许可以使用AJAX、PHP或类似的东西吗？

不需要为我找/编写任何代码，因为我知道这可能需要很长时间。只需指点我正确的方向，这样我就可以学会如何做。

Answer 1

你可以使用jQuery，$.ajax，$.post或$.get

或者也可以使用XMLHttpRequest来进行JavaScript编程（虽然老旧但经典）

对于PHP，可以使用readFile（服务器端不需要API）

一个小故事可能有所帮助

曾经我使用带有WiFi模块的Arduino

我使用Arduino收集数据，然后将数据传递给esp8266（WiFi模块），并使用GET方法发布到我的网站上，像这样：http://mySite.lo/?firstVar=myFirstVar&secondVar=mySecondVar，服务器从URL中获取GET数据

更新：

页面刷新

对于PHP，可以使用header("refresh: 3;")

对于JavaScript，可以使用setInterval(location.reload(),3000)

Answer 2

您可以使用API端点和客户端的ajax调用来完成此操作。 我为您草拟了一些代码。 我将端点URL设置为/url/to/api.php - 您需要根据树莓派上的服务器设置来更改此URL。

您还需要托管一个包含一些JavaScript代码的HTML文件，该代码每隔几秒钟轮询您的API。我设置它每5秒钟执行一次，使用setInterval。

<script>
// 客户端代码（JavaScript）- 应该放在</body>标签之前
(async () => {
    setInterval(async () => {
        const data = await fetch("/url/to/api.php").then(response => response.text());
        document.getElementById("#htmlElementWithThisId").innerHTML(data);
    }, 5000);
})()
</script>

// 在HTML中，您必须有一个具有id为"htmlElementWithThisId"的元素 - 这是内容将显示的位置

<div id="htmlElementWithThisId"></div>

最后，在api.php文件中，您将读取您的文件，并在每个请求上"echo"文件的内容。