Rails招聘应用：页面重载后如何保留表单输入数据？

嘿，这个场景我太熟悉了！之前做表单预览功能的时候也踩过这个坑，核心问题就是预览跳转后没有把用户填写的表单数据保留下来。下面给你几个好用的解决方案，按推荐程度排序：

方案一：用Session暂存表单数据（最常用、兼容性好） #

这个方法适合所有Rails版本，核心是把用户填写的有效表单数据存在Session里，返回编辑页时再取出来初始化表单。

1. 修改控制器逻辑
   在jobs_controller.rb里，先处理预览动作，把合法的表单参数存到Session：

def preview
  @job = Job.new(job_params)
  # 先验证数据有效性，避免存无效数据
  if @job.valid?
    session[:job_draft] = job_params
    render :preview
  else
    # 验证不通过直接回到编辑页，此时表单数据本来就会保留
    render :new
  end
end

def new
  # 从Session里取出暂存的草稿数据初始化表单
  if session[:job_draft].present?
    @job = Job.new(session[:job_draft])
    # 可以选择删除Session数据，或者等用户提交后再删
    # session.delete(:job_draft)
  else
    @job = Job.new
  end
end

# 别忘了确保job_params包含所有需要的字段
private
def job_params
  params.require(:job).permit(:title, :description, :salary_range, :location, ...)
end

2. 预览页的编辑链接指向new页面
   在预览模板app/views/jobs/preview.html.erb里，编辑按钮直接跳转到new路径即可：

<%= link_to '返回编辑', new_job_path, class: 'btn btn-outline-secondary' %>
<%= button_to '发布职位', jobs_path, method: :post, params: { job: session[:job_draft] }, class: 'btn btn-primary' %>

💡 注意：如果用户同时开多个标签页操作，Session可能会被覆盖，但对于普通招聘场景来说完全够用；如果有文件上传，这个方法不适用，需要单独处理文件临时存储。

方案二：用Turbo Streams实现无刷新切换（Rails 7+推荐） #

如果你的项目用了Rails 7自带的Turbo，可以做到完全不刷新页面，直接在当前页切换表单和预览状态，从根源上避免数据丢失，用户体验也更好。

1. 改造New页面模板
   把表单和预览内容放在可切换的容器里：

<div id="job_content">
  <%= render 'form', job: @job %>
</div>

在_form.html.erb里，把预览按钮改成提交到preview动作：

<%= form_with model: @job, url: preview_job_path, method: :post, data: { turbo_stream: true } do |form| %>
  <!-- 所有表单字段 -->
  <%= form.submit '预览职位', class: 'btn btn-primary' %>
<% end %>

2. 预览动作返回Turbo Stream
   在控制器的preview动作里，验证通过后用Turbo Stream替换页面内容为预览：

def preview
  @job = Job.new(job_params)
  if @job.valid?
    session[:job_draft] = job_params
    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.replace(:job_content, partial: 'preview', locals: { job: @job })
      end
    end
  else
    render :new
  end
end

3. 预览模板的编辑按钮切换回表单
   在_preview.html.erb里，编辑按钮触发Turbo Stream换回表单：

<div>
  <h2>职位预览</h2>
  <p><strong>职位名称：</strong><%= @job.title %></p>
  <p><strong>职位描述：</strong><%= @job.description %></p>
  <!-- 其他预览内容 -->
  
  <%= button_to '返回编辑', edit_job_draft_path, method: :get, data: { turbo_stream: true }, class: 'btn btn-outline-secondary' %>
  <%= button_to '发布职位', jobs_path, method: :post, params: { job: session[:job_draft] }, class: 'btn btn-primary' %>
</div>

4. 新增edit_draft动作处理切换
   在控制器里加一个动作，返回Turbo Stream渲染表单：

def edit_draft
  @job = Job.new(session[:job_draft])
  respond_to do |format|
    format.turbo_stream do
      render turbo_stream: turbo_stream.replace(:job_content, partial: 'form', locals: { job: @job })
    end
  end
end

别忘了在routes.rb里添加对应的路由：

resources :jobs do
  post :preview, on: :new
  get :edit_draft, on: :new
end

方案三：URL参数传递（不推荐，仅适用于简单表单） #

如果不想用Session，可以把表单数据作为查询参数拼在编辑链接里，但这个方法会让URL变得很长，敏感数据也会暴露，只适合字段极少的表单：

在预览页的编辑链接里：

<%= link_to '返回编辑', new_job_path(job: @job.attributes.except('id', 'created_at', 'updated_at')), class: 'btn btn-outline-secondary' %>

然后在new动作里直接用参数初始化：

def new
  @job = Job.new(params[:job] || {})
end

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