Question

我使用Node / Express作为Web框架，这是我构建删除操作的方式（它嵌套在更高级别的路由中）：

.delete((req, res) => {
  db.collection('collection-name').findOneAndDelete({ topic_title: req.body.topic_title}, 
  (err, item) => {
    if(err) return console.log(err);
    console.log('item deleted');
    res.redirect('/');
});

客户端请求：

$('.delete-button').click(function(){
$('.topic-title').text($('.topic-title').text());
if(confirm('Are you sure you want to delete ' + $('.topic-title').text() + '?')){
  fetch('topics', {
    method: 'delete',
    headers: { "Content-Type" : 'application/json' },
    body: JSON.stringify({
      'topic_title' : $('.topic-title').text()
    })
  });
}

当我点击删除按钮时，页面会重定向到数据库中所有条目的索引。

问题是删除的条目仍会显示在重定向的页面中，直到刷新页面为止。我对更新操作也遇到了这个问题。

我在这里做错了什么？

Answer 1

这是我自己遇到的同样问题，虽然我使用jQuery $ .ajax调用的方式与你使用fetch APU类似。

如果您考虑发生了什么，您将向网页的其余部分发送一个请求，以便在Express中触发delete操作。这反过来又是从数据库中删除记录。很好，那里没有问题。

delete操作完成后会出现问题。您正在将其重定向到/路由，但正在重定向的删除请求不是对页面的实际请求。

当我遇到这个时（事实上早些时候），我无法弄清楚发生了什么。我的解决方案是，一旦我知道数据库已更新，就从页面中删除元素，从而无需页面刷新/重定向。我的代码现在看起来像这样：

$(function(){
  $('.button').on('click', function(e){
    var id = this.id;
    $.ajax({
      url: '/',
      method: "DELETE",
      data: {item: id}
    })
    .done(function(data){
      $('#' + id).parent().remove();
    });
  });
});

可能有一种更优雅的方式来处理（在我的情况下）列表项的删除，但我还没有看到它。

此外，如果这不仅仅是个人项目，那么重新考虑fetch API可能是值得的，因为浏览器支持似乎是very limited。

Answer 2

尝试使用mongoose而不是MongoClient。它在具有类似功能的项目中非常完美 http://mongoosejs.com/

Mongodb已更新但未在重定向页面中显示

2 个答案: