javascript - 使用 fetch 后如何重新加载页面

Question

想知道为什么我下面的代码不起作用。基本上我是从我的网址获取数据来删除某些内容。删除时，它应该刷新。但它似乎不允许我这样做。但如果我手动刷新页面，它的作用就是删除帖子。

当我使用 Ajax 方法时有效，但我不知道为什么。

获取方法

const deleteBTN = document.querySelectorAll('.deleteBtn');
const update = document.querySelectorAll('.postedNote');

console.log(deleteBTN);

for (let btn of deleteBTN) {
    btn.addEventListener('click', (e) => {
        console.log("Delete from front end");
        console.log(btn[btn])
        let id = e.target.dataset.btn;
        fetch('http://localhost:3000/api/notes' + '/' + id, {
            method: "DELETE",
        }).then(() => {
            Location: reload()
        })
    })
}

Ajax方法

$(".deleteBtn").click((e) => {
    $.ajax({
        type: "DELETE",
        url: `http://localhost:3000/api/notes/${e.target.dataset.btn}`,
        success: function () {
            console.log("delete success");
        },
    }).done(
        setTimeout(() => {
            window.location.reload();
        }, 500)
    );
});

Answer 1

我们可以使用 window.location.reload 重新加载，就像在 ajax 成功时所做的那样。

请在下面找到代码片段

const deleteBTN = document.querySelectorAll('.deleteBtn');
const update = document.querySelectorAll('.postedNote');

console.log(deleteBTN);



for (let btn of deleteBTN) {
    btn.addEventListener('click', (e) => {
        console.log("Delete from front end");
        console.log(btn[btn])
        let id = e.target.dataset.btn;
        fetch('http://localhost:3000/api/notes' + '/' + id, {
            method: "DELETE",
        }).then(() => {
            window.location.reload();
        })
    })
}

此外，还有以下一些注意事项 当我们重新加载页面时，Ajax 的使用在这里失败了。 要么

• 我们应该执行一些 DOM 操作来删除已删除的帖子 从页面

或者，

• 如果我们使用 React，我们可以将帖子绑定(bind)到状态，然后 删除 API 成功调用时已删除的帖子，以便该组件 重新渲染，我们不需要刷新页面。