在 Rails 中使用 AJAX 发出 DELETE 请求时，如何从表单中获取不同的 id 值？

Question

我知道我可以为此使用“remote: true”，但我真的很想了解 AJAX 的内部工作原理以及它是如何工作的。这是这里的问题，我正在尝试使用表单输入向服务器发送 DELETE 请求，但是每次我提交操作时，我都会收到一条 404 消息，说没有与我正在尝试做的匹配的路由，我知道问题是我没有从表单元素中获得正确的 id 值，这就是引发错误的原因。如果有人可以帮助我解决这个问题，那就太好了。这是我的带有表单标签的 HTML 代码：

<div class="pending-study-partners">

   <div id="257">
      <img alt="Default" class="avatar-image" src="/assets/default.png" style="width:70px;">

      <span class="friend-name"><a href="/users/4">Jamil Boykins</a></span>
      - <em>Friendship is pending</em> 

      <form accept-charset="UTF-8" action="/user_friendships/257" class="edit_user_friendship"     id="edit_user_friendship_257" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="delete"><input name="authenticity_token" type="hidden" value="lKp0BTPohxbRepgQmXhtwWXfxIMC8JvqpR1VnLSdz5s="></div>
        <input class="button radius tiny" name="commit" type="submit" value="Delete request">
</form> </div>  
    <div id="259">
      <img alt="Default" class="avatar-image" src="/assets/default.png" style="width:70px;">

    <span class="friend-name"><a href="/users/2">jamil shamill</a></span>
    - <em>Friendship is pending</em> 

    <form accept-charset="UTF-8" action="/user_friendships/259" class="edit_user_friendship" id="edit_user_friendship_259" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="delete"><input name="authenticity_token" type="hidden" value="lKp0BTPohxbRepgQmXhtwWXfxIMC8JvqpR1VnLSdz5s="></div>
        <input class="button radius tiny" name="commit" type="submit" value="Delete request">
</form> </div>  

现在使用我的 AJAX 代码，我可以删除此人，并且只有在我刷新页面后他们才会从页面上消失，但是当我单击按钮提交表单时，我收到 404 错误。这是我的 AJAX 代码：

  $(".edit_user_friendship").on("submit", function(event){
    event.preventDefault();
    var _this = $(this);
    var friend = _this.attr('id').split("_");

    $.ajax({
      url: "/user_friendships/"+friend[friend.length-1],
      method: "DELETE",
      dataType: "script",
      success: function(event, data){
        console.log(data);
        $tingzSon = $($(event.target).parent()[0]);
        $tingzSon.remove();
      }
    })
  })

如果有人能确定我哪里出错了，那就太棒了。

非常感谢！

Answer 1

我收到一条 404 消息，说没有匹配的路由，请检查您的日志请求的去向。显然 url 有问题：“/user_friendships/”+friend[friend.length-1]。如果您添加请求和控制器代码的日志，将会有所帮助。

Answer 2

如果您希望使用多重删除，则必须将 ids 作为参数数组传递：

#config/routes.rb
resources :items do 
    delete :multi_delete
end    

#app/views/controller/index.html.erb
<%= @items.each do |item| %>
   <%= content_for :div, id: item.id do %>
       <%= check_box_tag "delete", item.id %>
   <% end %>
<% end %>

<%= link_to "Delete", multi_delete_items_path, method: :delete, id: "multi_remove" %>

#app/assets/javascripts/application.js
$("#multi_remove").on("click", function() {
    $.ajax({
       url: $(this).attr("href"),
       data: $('input[name="delete"]').serialize();
    });
});

#app/controllers/items_controller.rb
def multi_delete
   ids = params[:delete]
   Item.destroy_all(ids) if defined?(ids)
end

Answer 3

我发现 AJAX 请求不起作用的原因是因为我试图向服务器发送 DELETE 请求，而 Rails 实际上要求您通过发送 POST 请求并传入额外的数据字段来执行此操作在这样的 AJAX 请求中：data: {"_method":"delete"} 以便服务器实际删除您定位的特定元素。这是我修改后的代码：

  $(".edit_user_friendship").on("submit", function(event){
    event.preventDefault();
    var _this = $(this);
    var friend = _this.attr('id').split("_");

    $.ajax({
      url: "/user_friendships/"+friend[friend.length-1],
      data: {"_method":"delete"},
      method: "POST",
      dataType: "json",
      success: function(data){
        console.log(data);
        _this.parent().remove();
      }
    });
  });

我希望其他人可以从我这里的错误中吸取教训，或者我应该说缺乏知识。我假设 Rails 这样做了，所以不支持更现代的 HTTP 动词（如 DELETE 和 PUT）的旧浏览器仍然可以顺利发出这些请求