使用 .each 使用 AJAX 按 id 删除所有项目答案

【问题标题】：Using .each to delete all items by id using AJAX使用 .each 使用 AJAX 按 id 删除所有项目
【发布时间】：2015-07-24 07:44:20
【问题描述】：

是否甚至可以使用 ajax 从服务器中批量删除项目？我在这里完全不知所措。

我正在尝试运行 each 函数来提取服务器上每个项目的 url id，然后将其插入 ajax 删除类型调用。这对我来说很有意义，但我在编程方面还是新手，我觉得我可能会走得很远。

对此有任何见解都会有很大帮助。谢谢。

$('#delete-friends').on('click', function() {
  $.ajax({
    type: 'GET',
    url: 'http://rest.learncode.academy/api/johnbob/friends',
    success: function(friends) {
      var scratchFriend = $.each(friends, function(i, friend) {
        var friendID = (friend.id);
        console.log(friendID);

        $ajax({
          type: 'DELETE',
          url: 'http://rest.learncode.academy/api/johnbob/friends/'
          friendID ','
          success: function() {
            console.log('Friend Deleted Successfully!');
          }
        });
      });
    }
  });
});

#delete-friends {
  position: absolute;
  top: 10%;
  left: 70%;
  font-size: 20px;
  border-radius: 10px;
}

<div class="friendForm">
  <button id="delete-friends">Delete all of the friends?</button>
  <h4>Be a friend</h4>
  <p>Name:
    <input type='text' id='name'>
  </p>
  <p>Age:
    <input type='text' id='age'>
  </p>
  <button id="add-friend">Join us Friend</button>

</div>

【问题讨论】：

在您的DELETE Ajax 请求中尝试url: 'http://rest.learncode.academy/api/johnbob/friends/' + friendID,。
您也可以在单个 DELETE 请求中传递多个参数。参考这个stackoverflow.com/questions/15088955/…

标签： javascript jquery ajax

【解决方案1】：

我认为最好将一组朋友 ID 发送到后端 - 你只需要稍微调整后端：

$('#delete-friends').on('click', function() {
  $.ajax({
    type: 'GET',
    url: 'http://rest.learncode.academy/api/johnbob/friends',
    success: function(friends) {
      if (!friends) {
          return;
      }

      var friendIds = [];

      $.each(friends, function(i, friend) {
        friendIds.push(friend.id);   
      });

      $ajax({
          type: 'POST',
          url: 'http://rest.learncode.academy/api/johnbob/friends/'
          data: {
            friendIds: friendIds
          },
          success: function() {
            console.log('Friend Deleted Successfully!');
          }
      });

    }
  });
});

或者更好 - 创建一个删除方法，该方法将获取用户并删除他所有的朋友：

    $('#delete-friends').on('click', function() {
      $.ajax({
        type: 'POST',
        url: 'http://rest.learncode.academy/api/delete/friends',
        data: {
            user: 'johnbob'
        },
        success: function(data) {
          if (!data) {
              return;
          }

          console.log(data);
        }
      });
    });

但我猜你正在使用http://rest.learncode.academy/ API，所以你不能真正改变后端。

根据我在 learncode 的文档中看到的内容，您可以在 url 中附加朋友的 id 以将其删除。这应该可以解决问题：

        // -- SAME CODE FROM ANSWER --
        $ajax({
          type: 'DELETE',
          url: 'http://rest.learncode.academy/api/johnbob/friends/' + friendID
          success: function() {
            console.log('Friend Deleted Successfully!');
          }
        });
        // -- SAME CODE FROM ANSWER --

【讨论】：

是的，操纵后端并不是一个真正的选择。我必须通过 ajax 调用来完成。

【解决方案2】：

通常，服务器具有批量删除功能，您可以在其中传递所有要删除的 ID。一个一个地删除它们会带来很多流量，因为对于您发送到服务器的每个 id/请求，您还会发送有关请求的元信息，这将是多余的。您可以通过发送所有 ID 将此请求减少到一个。

【讨论】：