Question

我是使用Ajax的新手。我有一个Ruby应用程序，它使用Ajax请求从我的数据库中删除项目。删除仅在刷新浏览器后显示在页面上。我做错了什么？

这是我的带有Ajax调用的erb文件

<script>
$(document).ready(function(){
    $('input[type="checkbox"]').on("change", function() {
        var hall_id = $(this).val();   
    $.ajax({
  type:"GET",
  url:"items/" +hall_id ,
  dataType:"json",
  data: {id: hall_id},
  success:function(result){
    alert(result);
  }
})
});
});
</script>



<%= link_to "Logout", root_path %>

<h1>Hello <%= @user.first_name%> <%= @user.last_name%></h1>

<%= form_for @item do |f| %>
  <%= f.label :to_do %>:
  <%= f.text_field :to_do %><br />
  <%= f.hidden_field :email, :value => @user.email%>


  <%= f.submit %>
<% end %>

<% @items.each do |item|%>
    <%if item.email == @user.email%>
        <%= form_for @item do |f| %>
          <%= f.check_box :to_do, {}, item.id %>
            <%= item.to_do%><br />
        <% end %>
    <%end%>
<%end%>

这是我的控制器

class ItemsController < ApplicationController
  def index
  end

  def new
  end

  def show
    @items = Item.find(params[:id])
    Item.destroy(params[:id])
    puts @items.email
    redirect_to :back
  end

  def create
    @item = Item.create(to_do: params[:item][:to_do], email: params[:item][:email])
    redirect_to :back
  end
end

Answer 1

我认为问题是

redirect :back

您必须使用要在包含项目的div上更新的HTML部分进行响应。

建议开始：

将destroy操作移至destroy端点，以维护Rails资源的RESTFul架构。
更新您的ajax调用，以便使用新的destroy端点使用的delete方法。

所以你的ItemsController应该是这样的：

<强> items_controller.rb

class ItemsController < ApplicationController
  helper_method :item
  helper_method :items

  def index
    items
  end

  def new
    @item = Item.new
  end

  def show
    item
  end

  def create
    Item.create(item_params)
    redirect_to item
  end

  def destroy
    item.destroy

    render 'items/list', items: items
  end

  private

  def item
    @item ||= Item.find(params[:id])
  end

  def items
    @items ||= Item.all
  end

  def item_params
    params.require(:item).permit(:to_do, :email)
  end
end

AJAX调用应该是：

<script>
  $(document).ready(function() {
    $('input[type="checkbox"]').on("change", function() {
      var hall_id = $(this).val();

      $.ajax({
        type: 'DELETE',
        url: "items/" + hall_id ,
        dataType: "json",
        data: { id: hall_id },
        success:function(data) {
          $('.items-container').html(data);
        }
      })
    });
  });
</script>

除非我刷新浏览器，否则由于Ajax调用而导致的更改现在显示在页面中

1 个答案: