搜索

首页  >  问答  >  正文

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

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

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

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

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

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

P粉529581199P粉529581199476 天前662

全部回复(2)我来回复

  • P粉477369269

    P粉4773692692023-09-08 00:52:31

    你可以使用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)

    回复
    0
  • P粉818125805

    P粉8181258052023-09-08 00:08:51

    您可以使用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"文件的内容。

    回复
    0
  • 取消回复