Rails 7.0.4.3中提交表单后无刷新局部显示控制器响应数据

核心方案（基于Turbo实现，Rails 7默认集成） #

要解决无刷新提交表单并展示错误提示的问题，需调整控制器响应逻辑和视图结构，利用Turbo流实现局部DOM更新，规避原生表单提交的重定向要求。

1. 调整局部表单结构 #

给表单容器添加唯一ID，同时确保表单启用Turbo（Rails 7默认表单已带data-turbo="true"，可显式声明）：

# app/views/users/_login_form.html.erb
<%= form_with url: find_user_path, method: :post, data: { turbo: true } do |f| %>
  <%# 错误提示展示区 %>
  <% if locals[:error_message] %>
    <div class="error-text"><%= locals[:error_message] %></div>
  <% end %>

  <%= f.label :email, "邮箱" %>
  <%= f.email_field :email, class: "form-input" %>

  <%= f.submit "确认登录", class: "submit-btn" %>
<% end %>

2. 页面中渲染表单的容器加ID #

在some_page.html.erb里给表单外层容器指定ID，方便Turbo流定位替换：

# app/views/some_page.html.erb
<div id="login-form-container">
  <%= render partial: "users/login_form" %>
</div>

3. 修改控制器find_user方法 #

放弃flash和直接渲染局部的方式，改用Turbo流返回局部更新指令：

# app/controllers/users_controller.rb
def find_user
  @user = User.find_by(email: params[:user][:email])

  if @user
    # 登录成功逻辑（如设置session）
    redirect_to target_path, notice: "登录成功"
  else
    error_msg = "未找到该邮箱对应的用户"
    # 返回Turbo流，替换页面中的表单容器
    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace(
          "login-form-container",
          partial: "users/login_form",
          locals: { error_message: error_msg }
        )
      end
    end
  end
end

原方案问题分析 #

• 用flash[:notice]渲染局部：Turbo对表单提交的响应逻辑要求要么是重定向，要么是Turbo流，直接渲染局部会触发"Form responses must redirect to another location"报错，且flash需要页面刷新才能读取。
• 添加500状态码：Turbo会将其判定为错误响应，直接用响应内容替换整个页面，不符合局部更新需求。

额外注意事项 #

• 确保项目已引入Turbo（Rails 7默认集成，需确认import "@hotwired/turbo-rails"在application.js中）。
• 若需成功后也无刷新提示，可改用Turbo流追加通知元素，而非重定向。

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