Question

所以我试图在具有MongoDB数据库和Express.js路由的Web应用程序中删除我的模型实例。当用户单击删除按钮时，我想删除实例。我希望用AJAX实现这一目标。现在，删除操作在Mongo中正常工作。

我需要重新加载页面以重新呈现页面并反映对数据库的新更改。

这是我的路线：

router.delete("/articles/:id", function(req,res){
  Article.remove({"_id": req.params.id})
   .exec (function(err, doc){
     if (err){
         res.send(err)
     } 
     else{
        res.send(doc);
     }
     }).then(function(res){
        res.redirect("saved")
     })
 })

这是按钮：

<a class="waves-effect waves-light btn deleteButton">Delete Article</a>

以下是删除的AJAX代码：

$(".deleteButton").on('click', function(){
console.log(this.parentElement.getAttribute('data-id'));
var delete_id = this.parentElement.getAttribute('data-id');
$.ajax({
    method: "DELETE",
    URL: "/articles/" + delete_id
}).done(function(res){
    console.log(res);
}).catch(function(err){     
    console.log(err);
  })
})

这里仅供参考是我用来呈现html的saved.handlebars文件：

<div class="row">
 {{#each contents}}
  <div class="col s12 m3 l4" data-id ={{this.id}} id="articlePanel">
  {{!-- <h2 class="header">Saved Article</h2> --}}
   <div class="card horizontal red lighten-3 hoverable">
    <div class="card-stacked">
      <div class="card-content">
        <p>{{this.title}}</p>
      </div>
      <div class="card-action" data-id = {{this.id}}>
          <a class="btn-floating btn-large waves-effect waves-light red pulse"><i class="material-icons">add</i></a>
        <a class="waves-effect waves-light btn">See Notes</a>
        <a class="waves-effect waves-light btn deleteButton">Delete Article</a>
      </div>
    </div>
  </div>
</div>
{{/each}}
</div>

目前，我可以看到删除工作正常。但我必须手动重新加载新删除部分的页面才能消失。我尝试过res.send(doc)而不是res.render。我也试过res.redirect。仍然没有成功。

我在俯瞰什么？

Answer 1

定义data-id属性时使用双引号：

<div class="card-action" data-id="{{this.id}}">

将catch方法替换为fail，ajax对象中没有名为catch的方法：

$.ajax({
    method: "DELETE",
    URL: "/articles/" + delete_id
}).done(function(res) {
    console.log(res);
}).fail( function( jqXHR, textStatus, errorThrown) {     
    console.log(errorThrown);
});

此外，remove方法不会返回已删除的文档，除非是从模型实例调用它，或者如果使用findBuIdAndRemove方法：

Article.findByIdAndRemove( req.params.id, function (err, doc) {

    if (err) return res.json({ success: false });

    res.json({ success: true });

});

最后一件事，您无法向ajax调用发送重定向响应，让浏览器为您重新加载页面：

.done(function(res) {
    if (res.success) {
         // reload page
         window.location.reload();
    }
})

在MongoDB，Express，Node，Handlebars App中删除操作后重新加载页面

1 个答案: