Rails Ajax Jquery Delete之后提交Post请求

时间:2013-02-17 17:48:48

标签: ruby-on-rails ajax ruby-on-rails-3 jquery

我正在尝试使用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>

2 个答案:

答案 0 :(得分:22)

假设您的按钮位于表单内,单击该按钮可能除了触发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();
});

答案 1 :(得分:6)

您可以使用:

type: "DELETE"

而不是:

type: "POST"

并删除

data: {"_method":"delete"}