能否使用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"文件的內容。