Node.js短URL项目中Express DELETE请求成功后页面无法渲染

你用fetch发送DELETE请求时，浏览器只是在后台获取了服务器返回的HTML内容，但不会自动替换当前页面内容或跳转——这就是为什么网络标签能看到响应预览，主窗口却没变化。

提供三种可行方案，按需选择：

方案1：删除后跳转至成功页面（最直观） #

后端新增GET路由 #

先给deletion页面加一个可直接访问的GET路由：

app.get('/deletion/:id', (req, res) => {
  res.render('deletion', { id: req.params.id });
});

前端修改删除函数 #

在fetch完成后，强制跳转到这个GET路由：

async function deletefunction(url){
  await fetch(`/url/${url}` , {
    method: 'DELETE'
  });
  window.location.href = `/deletion/${url}`;
}

方案2：在当前页面直接替换内容（无需跳转） #

如果不想跳转页面，可直接把服务器返回的HTML替换当前页面内容：

async function deletefunction(url){
  const response = await fetch(`/url/${url}` , {
    method: 'DELETE'
  });
  const html = await response.text();
  document.body.innerHTML = html;
}

方案3：返回JSON提示后刷新/跳转（更灵活） #

后端修改DELETE路由 #

改为返回JSON数据：

app.route('/url/:id').delete(async(req , res) => {
    const shortId = req.params.id;
    await Url.findOneAndDelete({ shortId });
    res.status(200).json({ success: true, id: shortId });
})

前端修改删除函数 #

接收JSON后给出提示，再刷新页面或跳转：

async function deletefunction(url){
  const response = await fetch(`/url/${url}` , {
    method: 'DELETE'
  });
  const data = await response.json();
  if(data.success){
    alert(`短链接 ${url} 已删除`);
    window.location.reload(); // 刷新当前页面，或者跳转到指定页面：window.location.href = '/'
  }
}

内容的提问来源于stack exchange，提问作者Piyush Singh