如何使用 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>