使用复选框从猫鼬中删除数据（带 AJAX 的节点 JS）答案

【问题标题】：Delete data from mongoose using checkbox (Node JS w/ AJAX)使用复选框从猫鼬中删除数据（带 AJAX 的节点 JS）
【发布时间】：2017-06-03 20:41:41
【问题描述】：

我正在尝试使用 Node JS（带 Express）和 JQuery AJAX 从 Mongo DB（在本例中为猫鼬）删除数据。

因此，附近有带有数据的复选框（界面）。当我选中一个或多个这些复选框，然后按提交时，我希望将它们从数据库（Mongo DB）中删除。

因此，我尝试使用 DELETE 请求，从 AJAX 获取数据，然后将其从数据库中删除（使用 Model.remove() ），但只要我想获取 req.params （为了从数据库中删除项目），我只得到'未定义'。我认为我的 Ajax 有问题，但不确定到底是什么。

快递

    app.delete('/index', function(req,res){

    console.log("req body: " + req.body); // Undefined?
    console.log(req.params.del); // Undefined as well
    console.log(req.params.data); // Undefined as well

    Blog.remove({item: req.params.del}, function(err, data){
        if (err) throw err;
        res.json(data);
    });
});

AJAX

    $('#deleteAcc').on('click', function(){
      //var item = $(this).text().replace(/ /g, "-");
      var item = $(".checkbox input:checked").parent();
      item.remove();
      $.ajax({
        type: 'DELETE',
        url: '/index',
        del: item,
        success: function(data){
          //do something with the data via front-end framework
          location.reload();
        }
      });
  });

HTML

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Simple blogging website</title>
    <script
      src="https://code.jquery.com/jquery-1.12.4.min.js"
      integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
      crossorigin="anonymous"></script>
    <link href="/assets/styles.css" rel="stylesheet" type="text/css" />
    <script src="/assets/appAJAX.js"></script>
  </head>
  <body>
    <h1 align="center" size="40px">Welcome to blog!</h1>
    <h2 align="center" size="36px">Best UX/UI Website ever!</h2>
    <form style="text-align: center;">
        <input style="width: 400px; height: 125px;" type="text" name="inputText" placeholder="Piss someone off..." required/>
        <button type="submit">Submit post</button>
    </form>
    <br>
    <div class="control-group">
        <% for (var i = 0; i < posts.length; i++) { %>
        <label class="checkbox">
            <input type="checkbox" /><%= posts[i].item %>
        </label>
        <% } %>
    </div>
    <div class="btn">
        <button type="button" id="deleteAcc">Delete</button>
    </div>
  </body>
</html>

【问题讨论】：

你有没有尝试使用 sintaxe data: {del: item} 而不是 del: item？
@ElmerDantas 数据库数据没有任何反应。它首先删除，但是当我刷新网页时，它保持不变。
您缺少一些 html 详细信息确实会发出 ajax 请求...您没有将值传递给服务器...因此，您会变得未定义...我'我在工作，但我正在尝试编写一些代码来帮助你。

标签： jquery ajax node.js mongodb mongoose

【解决方案1】：

我已经制作了this fiddleJS...将一些东西更改为您想要的...复选框的值将类似于posts[i].item._id 假设item 对象有一个ID（应该有）然后你'将可能能够访问您的服务器req.body.deletedItems

希望对你有帮助

【讨论】：

所以，我改变了这个，但现在它删除了所有东西，不管我是否选中了这个框。 Blog.remove({item: req.params.deletedItems}, function(err, data){ if (err) throw err; res.json(data); });
您需要遍历数组以从您的收藏中删除每个项目...只有在此之后，您可以随意返回给客户端

【解决方案2】：

很抱歉写我的通知作为答案，我没有足够的积分来写 cmets。但是与@ElmerDantas 回答有关，您将一组ID 传递给您的后端。因此，您将不得不使用 for 循环遍历数组，并在您的 for 循环内尝试使用 mongoose remove 方法删除“选定”对象：

尝试做这样的事情：

var ids = req.params.deletedItems;
for(var i = 0; i < ids.length; i++){
 Blog.remove({item: ids[i]}, function(err, data){ if (err) throw err; res.json(data); })}

【讨论】：

喜欢这个？使用EJS，模板库gist.github.com/anonymous/f80e737fd01c652c8fe3238b82b270d9
使用 Elmer 的解决方案，您已经将所有 id 放入数组中，然后传递给后端。我的解决方案是为你的后端
它说 req.params.deletedItems 未定义并且无法读取属性长度（即在循环条件“ i prntscr.com/dxn5y1
嗯，这意味着你的路由器没有得到 deletedItems 数组，这很奇怪。尝试控制台输出数组并检查您的 ajax 语法
它要么是未定义对象，要么是空对象。然而，有趣的是 Ajax 处理它并且数组不是空的（即它正在工作），但它无法转移到 app.delete() 请求（可能是因为索引问题？因为我有通用 url='index' )

【解决方案3】：

维护每个复选框的 id 或值

<input type="checkbox" id="<%= posts[i]._id"/><%= posts[i].item %>

ajax 调用中的语法不正确

$(document).ready(function(){
  $('#deleteAcc').on('click', function(){
  var item = new Array();
    if($('input:checkbox:checked').length>0){
      $('input:checkbox:checked').each(function(){
        item.push($(this).attr('id'));
      });
      sendResponse(item);
    }
 });
  function sendResponse(item) {
    $.ajax({
      type:'post',
      url:"/index",
      data:{item:item},
      success:function(data){
        location.reload();
      }
    });
  }
});

在控制器中发出 post 请求； req.body 是一个对象而不是数组，所以只能按键访问；
使用 $in 作为比较查询运算符来删除集合中的文档

app.post('/index', function(req,res){
    var items=[];
    for(var key in req.body){
        items=req.body[key];
    }
    Blog.remove({_id:{$in:items}},function(err, data){
        if (err) throw err;
        res.json(data);
    });
});

希望这会有所帮助！ :)

【讨论】：