Rails中实现点击submit按钮提交表单不刷新页面的方法

你现有的代码已经完成了AJAX提交的核心配置，按以下步骤补全即可实现无刷新提交：

• 确认Rails UJS已正确引入
  remote: true的AJAX提交能力依赖Rails UJS驱动，需要保证项目中已加载该依赖：
  若你使用Rails 6+的importmap配置，检查app/javascript/application.js中存在以下代码：

  import "@rails/ujs"
  Rails.start()
  

  Webpacker、JSBundling-Rails等其他JS打包方案同理，确保UJS已引入并完成初始化。

• 修正表单ID的动态插值逻辑
  你当前Slim模板中的表单ID写为id: "favorite-{job_id}"，缺少Slim的插值标识符#，会导致所有职位的表单ID重复，后续DOM操作会失效，修改为：

  = form_with(model: @favorite_job, url: favorite_jobs_path(job_id: job_id), id: "favorite-#{job_id}", remote: true) do |f|
    = f.submit 'Favorite', class: 'btn btn-primary btn-height'
  

  取消收藏的表单也按同样规则修正ID即可。

• 新增AJAX响应的JS模板
  你控制器中已经配置了format.js响应，只需要在对应视图目录下创建动作匹配的JS模板，实现页面局部更新逻辑：

  1. 新建app/views/favorite_jobs/create.js.erb，对应收藏成功后的页面更新，示例代码如下，可根据你的业务需求修改：

  // 定位到当前提交的表单
  const targetForm = document.getElementById('favorite-<%= @job.id %>');
  // 替换为取消收藏状态的按钮/表单
  targetForm.outerHTML = `
    <form action="/favorite_jobs/<%= @job.id %>" method="post" id="favorite-<%= @job.id %>" data-remote="true">
      <input type="hidden" name="_method" value="delete">
      <input type="submit" value="取消收藏" class="btn btn-secondary btn-height">
    </form>
  `;
  

  2. 新建app/views/favorite_jobs/destroy.js.erb，对应取消收藏后的页面更新：

  const targetForm = document.getElementById('favorite-<%= @job.id %>');
  targetForm.outerHTML = `
    <form action="/favorite_jobs?job_id=<%= @job.id %>" method="post" id="favorite-<%= @job.id %>" data-remote="true">
      <input type="submit" value="收藏" class="btn btn-primary btn-height">
    </form>
  `;
  

异常排查 #

如果配置后仍出现页面重载，可按以下顺序检查：

• 浏览器控制台是否有UJS相关的报错
• 渲染后的表单HTML是否带有data-remote="true"属性
• 浏览器网络面板中表单提交请求是否为XHR类型，返回状态码是否为200，返回的JS内容是否存在语法错误

内容的提问来源于stack exchange，提问作者Hà Mai