Rails Ajax Jquery 删除 后 提交 Post 请求

Question

我正在尝试使用Ajax删除我的Rails模型的实例。

这会在按钮点击时发生，我的代码如下所示：

$("#button").click(function(){ 
    $.ajax({
        type: "POST",
        url: "/slot_allocations/" + slotallocation_id,
        dataType: "json",
        data: {"_method":"delete"},
        complete: function(){
            $( "#SlotAllocationForm" ).dialog( "close" );
            alert("Deleted successfully");
        }
    });
});

我能够成功删除它，但是delete方法总是会在向服务器发送post请求后跟随着一个请求，以使用现有数据创建新模型。 这些是对服务器的请求。

1. POST http://localhost:3000/slot_allocations/1009 [HTTP/1.1 204 No Content  57ms]    
2. POST http://localhost:3000/slot_allocations [HTTP/1.1 302 Found  111ms]
3. GET http://localhost:3000/slot_allocations/1010 [HTTP/1.1 200 OK  185ms]

#1 发生在我点击按钮时。然而，我不太确定为什么会发生 #2 和 #3。

视图中有两个按钮：

<button id="button">Delete</button>
<div class="actions"><%= f.submit %></div>

- Butter Beer

---

你能否发布一下你的视图中定义按钮的部分（如果适用，还有周围的表单）？ - Dylan Markow

视图上有两个按钮<button id = "button">删除</button>和<div class="actions"><%= f.submit %></div>。以下代码是针对第一个按钮的。 - Butter Beer

我认为提交按钮可能是问题所在，尝试将其删除，但第二个提交仍然发生了。 - Butter Beer

关于代码行 data: {"_method":"delete"} 的背景信息，请参考如何使用PATCH、PUT或DELETE方法的表单？ -- Rails框架鼓励您的应用程序采用RESTful设计... 然而，大多数浏览器在提交表单时只支持GET和POST方法。Rails通过模拟其他方法的方式来解决这个问题，它会在名为_method的隐藏输入中设置所需的方法。 - user664833

Answer 1

假设您的按钮在表单内，点击它可能会触发ajax请求并提交该表单。

你需要做的是防止点击按钮时默认提交表单的操作。

将function()参数更改为function(event)，然后添加event.preventDefault()调用：

$("#button").click(function(event){ 
    $.ajax({
        type: "POST",
        url: "/slot_allocations/" + slotallocation_id,
        dataType: "json",
        data: {"_method":"delete"},
        complete: function(){
            $( "#SlotAllocationForm" ).dialog( "close" );
            alert("Deleted successfully");
        }
    });
    event.preventDefault();
});

- Dylan Markow

---

你用 data: {"_method": "delete"} 部分拯救了我的生命。点个赞！ - cassi.lup

@cassi.lup 在OP的问题中提到了 data: {"_method":"delete"}。你应该给 @butter-beer 点赞，只是这么说。 - user664833

Answer 2

您可以使用：

type: "DELETE"

替代方案：

type: "POST"

并且删除

data: {"_method":"delete"}

- Masolino

---

大多数浏览器在提交表单时不支持除“GET”和“POST”之外的其他方法。有关另一个参考，请参阅https://api.jquery.com/jquery.ajax/并搜索“Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.” - user664833

今天的浏览器在进行XMLHTTP请求时支持PUT/DELETE，但是在<form>标签中可能不被支持。 - Shiva

在我的情况下，使用数据为{"_method":"delete"}的POST类型正是我所需要的。当我使用DELETE时，发生的是它运行了"DELETE"/controller/member_id并删除了具有member_id的对象，但然后它开始另一个请求："DELETE"/controller，并引发了无路由错误。这是一个链接而不是按钮，但它在一个表单中。我不知道是什么导致了这种异常。 - KaizenCodes