如何使用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希望收到DELETE請求。 兩種選擇：

將您的Jquery ajax請求更改為：

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

或者，如果您想保留現有的Javascript代碼，請將您的Sinatra應用程序更改為：

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

GET，POST，DELETE和PUT是標准的Http請求，您可以使用post或delete獲得所需的結果。