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

Posted

技术标签:

【中文标题】使用 fetch 后如何重新加载页面【英文标题】:How to reload page after using fetch 【发布时间】:2021-07-31 14:46:18 【问题描述】:

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

当我使用 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)
    );
);

【问题讨论】:

如果你也使用window.location.reload();而不是Location: reload()来获取fetch呢? 我已经尝试添加它,但它根本没有达到 .then() 方法 你真的需要重新加载吗?成功请求后,您可以通过操作 DOM 简单地删除元素。重新加载整个页面似乎是肮脏的解决方案。 【参考方案1】:

我认为您不应该在删除其中一个元素时尝试重新加载页面, 相反,如果响应显示已成功删除,我会检查响应状态并手动更新 DOM 以使已删除的元素消失。

【讨论】:

【参考方案2】:

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

请在下面找到代码 sn-p

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,我们可以将帖子绑定到状态,然后 在 API 成功调用时删除已删除的帖子,因此该组件是 重新渲染,我们不需要刷新页面。

【讨论】:

您好,感谢您的留言。我试过上面的方法。这是错误是得到“未捕获(承诺中)TypeError:无法获取”,ajax方法由于某种原因起作用。但 fetch 方法返回错误。但是,如果我刷新它会删除帖子 嗨,请尝试以下代码并了解反馈获取('localhost:3000/api/notes' + '/' + id, method: "DELETE", ).then((res) => res.json() ).then(res => window.location.reload()) 请放置一个catch块,看看rest调用是通过还是失败。 它返回了一个 TypeError: Failed to fetch message。 我相信后端会抛出这个错误,一旦 API 响应成功,它应该可以工作

以上是关于使用 fetch 后如何重新加载页面的主要内容,如果未能解决你的问题,请参考以下文章

Safari:重新加载后“由于访问控制检查而无法加载 Fetch API”

确定点击警报页面后如何重新加载页面

提交表单后如何使用模态重新加载页面

在Streamlit中使用Python选择任何小部件后如何停止重新加载页面

如何使用 Ajax 加载过滤后的数据,而无需在 laravel 中重新加载整个页面

页面重新加载后,如何使用 twitter bootstrap 保持当前选项卡处于活动状态?