AJAX Rails ajax调用之后没有显示flash消息

在本文中，我们将介绍使用AJAX调用后在Rails应用中没有显示flash消息的问题，并提供解决方案和示例说明。

阅读更多：AJAX 教程

问题背景

在Rails开发中，我们经常使用AJAX来实现异步请求，通过局部刷新页面来提升用户体验。然而，在使用AJAX调用后，有时候我们会发现flash消息没有正确显示在页面上，这给用户带来了困惑。

问题分析

这个问题的原因是由于AJAX默认只返回局部刷新的内容，而flash消息通常是全局的，在AJAX调用中是不会更新的。由于没有页面整体刷新，flash消息也就无法从服务器端传递到浏览器端。

解决方案

为了解决这个问题，我们可以通过在AJAX调用中手动将flash消息传递到浏览器端。下面是一种常见的解决方案：

在页面中定义一个用于显示flash消息的标签，例如：

<div id="flash-messages">
  <%= render 'layouts/flash_messages' %>
</div>

在服务器端，在需要显示flash消息的地方，将消息存储到session中，例如：

class UsersController < ApplicationController
  def create
    @user = User.new(user_params)
    if @user.save
      flash[:success] = 'User created successfully'
      render js: "window.location='/users'" and return if request.xhr?
      redirect_to users_path
    else
      render 'new'
    end
  end
end

在AJAX调用成功时，通过JavaScript代码将session中的flash消息拷贝到页面的flash消息标签中，例如：

$.ajax({
  url: '/users',
  method: 'POST',
  data: {
    user: {
      name: 'John',
      email: 'john@example.com'
    }
  },
  success: function(response) {
    // Copy flash messages to flash-messages div
    $('#flash-messages').html(response.flash);
  }
});

在AJAX调用返回的响应中，将flash消息以HTML格式返回，例如：

class UsersController < ApplicationController
  def create
    # ...
    if @user.save
      flash[:success] = 'User created successfully'
      flash_html = render_to_string(partial: 'layouts/flash_messages', formats: :html)
      render json: { flash: flash_html } and return if request.xhr?
      # ...
    end
  end
end

通过以上步骤，我们可以实现在AJAX调用后正确显示flash消息。

示例说明

假设我们有一个用户注册页面，当用户成功注册后，我们希望显示一个“成功注册”的flash消息。通过以上解决方案，我们可以在AJAX调用后正确显示flash消息。

首先，在页面中定义用于显示flash消息的标签：

<div id="flash-messages">
  <%= render 'layouts/flash_messages' %>
</div>

然后，在服务器端，在用户成功注册时，添加flash消息到session中：

class UsersController < ApplicationController
  def create
    # ...
    if @user.save
      flash[:success] = 'User created successfully'
      # ...
    end
  end
end

接下来，在AJAX调用成功时，将session中的flash消息拷贝到页面的flash消息标签中：

$.ajax({
  url: '/users',
  method: 'POST',
  data: {
    user: {
      name: 'John',
      email: 'john@example.com'
    }
  },
  success: function(response) {
    // Copy flash messages to flash-messages div
    $('#flash-messages').html(response.flash);
  }
});

最后，在服务器端，在AJAX调用返回的响应中，将flash消息以HTML格式返回：

class UsersController < ApplicationController
  def create
    # ...
    if @user.save
      flash[:success] = 'User created successfully'
      flash_html = render_to_string(partial: 'layouts/flash_messages', formats: :html)
      render json: { flash: flash_html } and return if request.xhr?
      # ...
    end
  end
end

通过以上步骤，当用户成功注册时，AJAX调用后页面中会正确显示出“成功注册”的flash消息。