javascript - 使用 .each 通过 AJAX 按 id 删除所有项目

Question

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

我正在尝试运行每个函数来提取服务器上每个项目的 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>

Answer 1

我认为最好将一组 friend 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!');
          }
      });

    }
  });
});

或者更好 - 创建一个删除方法，该方法将接受用户并删除他的所有 friend :

    $('#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 --