如何使用Ajax在Sinatra Ruby应用中删除帖子

Question

我正在尝试使用Ajax在Sinatra上的简单Ruby应用中删除帖子。

这是我的删除路线，尚无任何Ajax调用：

delete '/posts/:id' do
  id = params[:id]
  post = Post.find(id)
  post.destroy
  redirect '/posts'
end

这是我在JS文件中删除的内容：

  $('.post-container').on('submit', '.delete-form', function(event){
    event.preventDefault();
    var url = $(this).attr('action'),
        data = $(this).serialize();
        $.ajax({
          url: url,
          type: 'post',
          data: data
        })
        .success(function(response){
          $('.post-container').remove(response);
        }.bind(this))
        .fail(function(status, xhr, error){
        })
  })

这是我的index.erb

<header>
  <h1>Hacker News</h1>
  <p>
    <a href="#posts">new</a>
    <a href="#">comments</a>
    <a href="#">popular</a>
    <a href="#">login</a>
  </p>
</header>

<div class='post-container'>
  <% @posts.each do |post| %>
  <%= erb :'_post' , locals: {post: post}%>
  <% end %>
</div>
<form id="posts" method="post" action="/posts">
  <input type="text" name="title" placeholder="title">
  <input type="submit" value="submit new post">
</form> 

和我的部分包含删除表格：

<article id="<%= post.id %>">
  <form method="post" action='/posts/<%= post.id %>/vote' class="inline">
    <button type="submit" name="submit_param" value="submit_value" class="fa fa-sort-desc vote-button upvote-button"></button>
  </form>
  <h2><a href='/posts/<%= post.id %>'><%= post.title %></a></h2>
  <p>
    <span class='points'><%= post.points %></span>
    <span class='username'><%= post.username %></span>
    <span class='timestamp'><%= post.time_since_creation %></span>
    <span class='comment-count'><%= post.comment_count %></span>
    <!-- <a class="delete" href='/posts/<%= post.id %>'></a> -->
    <form action='/posts/<%= post.id %>' method='post' class='delete-form'>
      <input type="hidden" name="_method" value="delete">
      <input type="submit" value="delete">
    </form>
  </p>
</article>

我知道我必须打电话.xhr？在路线上，但我不确定在哪里和渲染什么。另外，在使用AJAX时，如何绕过隐藏的输入方法进行删除。我希望这是足够的信息。谢谢。

Answer 1

似乎您正在发送HTTP POST请求，但Sinatra希望获得删除请求。两个选项：

将您的jQuery ajax请求更改为：

    $.ajax({
      url: url,
      type: 'DELETE', // Change this
      data: data
    })

或，如果要保留现有的JavaScript代码，请将您的Sinatra申请更改为：

post '/posts/:id' do  # Change delete to post
...

获取，发布，删除和PUT是标准HTTP请求，您可以使用post或删除来获取所需的结果。