Rails 5.2中提交表单调用方法后如何更新模态框内DOM对象

架构老林

2026-10-3

问题原因

你的报错和JS不执行核心来自两个问题：

Controller没有显式声明响应JS格式，Rails默认尝试查找HTML模板，因此抛出UnknownFormat错误
异步表单配置存在缺失，表单走了同步提交路径，导致返回的JS代码被浏览器当成纯文本页面渲染，没有执行

修复步骤

1. 修正Controller的verify方法

添加格式响应声明，明确指定请求成功后渲染JS视图：

def verify
  # 建议增加更新成功的判断，避免异常情况
  if @task.update(git_hash: Time.now.strftime("Tested at %H:%M"))
    respond_to do |format|
      format.js # 自动匹配同路径下的verify.js.erb
    end
  else
    # 可选：更新失败的提示逻辑
    respond_to do |format|
      format.js { render js: "alert('更新失败，请检查参数后重试');" }
    end
  end
end

2. 修正表单配置（适配不同Rails版本）

你的表单已经加了remote: true，如果是Rails 7+使用Turbo的版本，需要额外指定Turbo响应格式为JS，否则默认会请求Turbo Stream格式：

<%# 只需要修改form_with的参数，增加data-turbo-format配置 %>
<%= form_with model: @task, url: :verify_task, method: :post, html: {id: "verify_form"}, remote: true, data: { turbo_format: :js } do |f| %>
<!-- 其余表单内容不变 -->
<% end %>

3. 检查路由配置

确认routes.rb中已经正确配置verify的成员路由：

resources :tasks do
  member do
    post :verify
  end
end

4. 验证异步请求依赖

Rails 6及以下版本：确认app/assets/javascripts/application.js中存在//= require rails-ujs引入，这是处理remote异步表单的基础依赖
Rails 7+版本：确认Importmap/Gemfile中已经正确引入@rails/ujs或Turbo依赖