如何使用 javascript 和 django 在不刷新頁面的情況下獲取數據？

Question

我正在使用 django 生成 API 並使用 javasctipt 獲取數據。 我第一次使用 javascript 我對 javasctipt 不是很了解。 我想在不刷新頁面的情況下獲取數據 我正在使用 javacript 從 API 獲取數據。我的代碼僅在刷新頁面時從數據庫獲取數據。 有沒有辦法在不刷新頁面的情況下獲取數據？ 當有人創建新帖子時，頁面會自動在索引頁面中加載帖子而不刷新頁面？

index.html

<script>
    const Story = document.getElementById('stories');
    const Url = 'http://localhost:8000/api/';

    async function getPosts() {
        await fetch(Url)
            .then((res) => res.json())
            .then((data) => {
                data.map((post, index) => {
                    Story.innerHTML += `
                <div class="card card-body mb-3">
                  <h3>${post.title}</h3>
                </div>
              `;
                });
            })
            .catch((err) => console.log(err))
    }
    var timer = setInterval(getPosts,3000)
    getPosts();
</script>

Answer 1

無需進入WebSocket之類的更復雜的世界，最簡單的方法是將getPosts(); 進入setInterval並讓它每隔 X 秒運行一次 function。 這將重新運行 function 即使沒有發布新帖子，但這是最簡單的。

下面的代碼將在加載時每 3 秒（3000 毫秒）運行一次 getPosts

<script>
    const Story = document.getElementById('stories');
    const Url = 'http://localhost:8000/api/';

    async function getPosts() {
        await fetch(Url)
            .then((res) => res.json())
            .then((data) => {
                Story.innerHTML = "";
                data.map((post, index) => {
                    Story.innerHTML += `
                <div class="card card-body mb-3">
                  <h3>${post.title}</h3>
                </div>
              `;
                });
            })
            .catch((err) => console.log(err))
    }

    var timer = setInterval(getPosts,3000)
    getPosts();
</script>