Adakah mungkin untuk membaca dan memaparkan kandungan fail txt setiap beberapa saat menggunakan HTML?

Question

Saya mempunyai fail txt yang dikemas kini dengan data baharu setiap beberapa saat. Ia disimpan dan dijana pada Raspberry Pi, yang juga akan bertindak sebagai pelayan.

Saya ingin menambah kandungannya pada kod html untuk paparan.

Ia harus dikemas kini tanpa memuat semula halaman secara manual.

Adakah cara untuk melakukan ini? Mungkin menggunakan AJAX, PHP atau sesuatu yang serupa?

Tidak perlu mencari/menulis sebarang kod untuk saya kerana saya tahu ia mungkin mengambil masa yang lama. Hanya tunjukkan saya ke arah yang betul supaya saya boleh belajar cara melakukannya.

Answer 1

Boleh guna jQuery，$.ajax，$.post或$.get

Atau anda juga boleh menggunakan XMLHttpRequest untuk pengaturcaraan JavaScript (lama tetapi klasik)

Untuk PHP, anda boleh menggunakan readFile (tiada API diperlukan di bahagian pelayan)

Sedikit cerita mungkin membantu

Pernah saya menggunakan Arduino dengan modul WiFi

Saya menggunakan Arduino untuk mengumpul data dan kemudian menghantar data ke esp8266 (modul WiFi) dan menggunakan GET方法发布到我的网站上，像这样：http://mySite.lo/?firstVar=myFirstVar&secondVar=mySecondVar，服务器从URL中获取GETdata

Kemas kini:

Muat semula halaman

Untuk PHP, anda boleh menggunakan header("refresh: 3;")

Untuk JavaScript, anda boleh menggunakan setInterval(location.reload(),3000)

Answer 2

Anda boleh melakukan ini menggunakan titik akhir API dan panggilan ajax di bahagian pelanggan. Saya telah merangka beberapa kod untuk anda. Saya menetapkan URL titik akhir kepada /url/to/api.php - anda perlu menukar URL ini berdasarkan tetapan pelayan anda pada Raspberry Pi.

Anda juga perlu mengehoskan fail HTML yang mengandungi beberapa kod JavaScript yang meninjau API anda setiap beberapa saat. Saya menetapkannya untuk melaksanakan setiap 5 saat, menggunakan 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>

Akhir sekali, dalam fail api.php anda, anda akan membaca fail anda dan "gema" kandungan fail pada setiap permintaan.