Sinatra Ruby 앱에서 AJAX를 사용하여 게시물을 삭제하는 방법은 무엇입니까?

Question

Sinatra의 간단한 Ruby 앱에서 AJAX를 사용하여 게시물을 삭제하려고합니다.

이 내 삭제 경로는 아직 AJAX 호출하지 않고 있습니다 :

$('.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

입니다 :

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

    post.destroy 
    redirect '/posts' 

end 

이 내가 삭제하는 나의 JS 파일에있는 것입니다

<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 요청을받을 것으로 예상됩니다. 두 가지 옵션 :

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

GET, POST : 기존 자바 스크립트 코드를 유지하려는 경우, 당신의시나 응용 프로그램을 변경,

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

또는 :

이에 JQuery와 아약스 요청을 변경 DELETE 및 PUT은 표준 HTTP 요청이며 POST 또는 DELETE를 사용하여 원하는 결과를 얻을 수 있습니다.