Question

是否可以使用ajax从服务器批量删除项目？我在这里完全失败了。

我正在尝试运行每个函数来拉取服务器上每个项目的url id，然后将其插入ajax delete类型调用。这对我来说很有意义，但我仍然是编程的新手，我觉得我可以侥幸逃脱。

对此的任何见解都将是一个巨大的帮助。谢谢。

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

我认为最好将一组朋友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，因此您无法真正更改后端。

从学习代码中的文档中我可以看到，您可以在网址中附加朋友的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 --

Answer 2

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

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

2 个答案: