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请求更改为：

global.XMLHttpRequest = require("xmlhttprequest");

或者，如果您想保留现有的Javascript代码，请将Sinatra应用程序更改为：

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

GET，POST，DELETE和PUT是标准的Http请求，你可以使用post或delete来获得你想要的结果。

如何使用AJAX删除Sinatra Ruby应用程序中的帖子？

1 个答案: