如何通过Rails Ajax获取Destroy函数执行状态并展示结果提示？

嘿，我来帮你搞定这个问题！你的现有代码里，destroy动作直接用了redirect_to，这对Ajax请求（remote:true）不太友好——Ajax期望的是JS响应而非重定向。我们只需要调整控制器逻辑，加上对应的JS视图，就能实现显示"OK"或"Fail"的提示啦。

步骤1：修改ArticlesController的destroy方法 #

我们要让控制器区分普通请求和Ajax请求，同时处理可能的错误（比如找不到目标文章的情况）：

class ArticlesController < ApplicationController
  def index
    @articles = Article.all
    DatChat.reset_column_information()
    @dat_chat= DatChat.all
  end

  def show
    @article = Article.find(params[:id])
  end

  def destroy
    begin
      @article = Article.find(params[:id])
      @article.destroy
      @success = true
    rescue ActiveRecord::RecordNotFound
      @success = false
    end

    # 根据请求格式分别响应：Ajax请求返回JS，普通请求重定向
    respond_to do |format|
      format.html { redirect_to articles_path }
      format.js
    end
  end
end

这里用begin-rescue捕获"找不到文章"的异常，用@success标记执行状态，再通过respond_to适配不同的请求类型。

步骤2：创建destroy.js.erb视图文件 #

在app/views/articles/目录下新建destroy.js.erb文件，用来处理Ajax成功后的页面更新和提示：

// 移除对应的文章行（通过data-id定位）
$("tr[data-id='<%= @article.id if @article %>']").remove();

// 显示提示信息
const alertContainer = $("#alert-container");
if (<%= @success %>) {
  alertContainer.html("<div class='alert alert-success'>OK</div>");
} else {
  alertContainer.html("<div class='alert alert-danger'>Fail</div>");
}

// 3秒后自动隐藏提示，优化用户体验
setTimeout(() => {
  alertContainer.empty();
}, 3000);

步骤3：在index.html.erb中添加提示容器和行标识 #

修改你的index.html.erb，给每个文章行加上data-id属性（方便JS精准定位要移除的行），同时添加一个提示容器：

<!-- 新增：提示信息容器 -->
<div id="alert-container"></div>

<table>
  <% @articles.each do |article| %>
    <!-- 新增：给行加上data-id属性 -->
    <tr data-id="<%= article.id %>">
      <td><%= article.title %></td>
      <td><%= article.description %></td>
      <td><%= link_to 'Destroy', article_path(article), method: :delete, remote:true, data: { confirm: 'Are you sure?' } %></td>
    </tr>
  <% end %>
</table>

原理说明 #

当你点击Destroy链接时，remote:true会发送一个JS格式的请求到控制器的destroy方法。控制器处理完成后，会渲染destroy.js.erb文件，执行里面的JS逻辑：

1. 通过data-id定位并移除对应的文章行
2. 根据@success的值在提示容器中显示"OK"或"Fail"
3. 3秒后自动清空提示，避免页面杂乱

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者D T