Rails 7控制器返回JS后浏览器异常跳转问题求助

核心问题 #

你当前的表单还是以普通HTTP提交的方式发送请求，而非AJAX异步提交。Safari会把返回的JS响应当作可下载资源或直接跳转，而不会在当前页面执行JS代码。

具体修复步骤 #

1. 确保表单通过AJAX提交

   • 如果你用Rails内置的UJS（Rails 7默认通过importmap引入@rails/ujs），给表单加data: { remote: true }属性，Rails会自动用AJAX处理提交：

     <%= form_with model: @resource, format: :js, data: { remote: true } do |f| %>
       <%= f.text_area :content %>
       <!-- 其他表单元素 -->
     <% end %>
     

   • 要是用自定义JS处理提交，别直接调用form.submit()（这会触发普通提交），改用fetch或XMLHttpRequest发异步请求，示例：

     const form = document.querySelector('#resource_form');
     form.addEventListener('input', debounce(() => {
       const formData = new FormData(form);
       fetch(form.action, {
         method: 'PATCH',
         body: formData,
         headers: {
           'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
           'Accept': 'text/javascript'
         }
       })
       .then(response => response.text())
       .then(script => eval(script));
     }, 500));
     
     // 防抖函数避免频繁提交
     function debounce(func, delay) {
       let timeoutId;
       return function() {
         clearTimeout(timeoutId);
         timeoutId = setTimeout(func, delay);
       };
     }
     

2. 修正控制器响应逻辑
   确保update动作的respond_to正确处理JS请求：

   def update
     if @resource.update(resource_params)
       respond_to do |format|
         format.js { render :update } # 对应/views/resources/update.js.erb
       end
     else
       respond_to do |format|
         format.js { render js: "alert('保存失败');" }
       end
     end
   end
   

3. 验证update.js.erb内容
   模板里写针对当前页面的操作，比如更新保存提示：

   // /views/resources/update.js.erb
   const statusEl = document.querySelector('.save-status');
   statusEl.textContent = '已自动保存';
   setTimeout(() => statusEl.textContent = '', 2000);
   

4. 检查Safari特殊设置

   • 表单别加target="_blank"这类会触发跳转的属性
   • 确认请求头里Accept包含text/javascript，AJAX提交时Rails UJS会自动加，自定义fetch要手动设置

额外优化（可选） #

Rails 7默认启用Turbo，也可以用Turbo Stream返回更新片段，更简洁：

def update
  if @resource.update(resource_params)
    respond_to do |format|
      format.turbo_stream { render turbo_stream: turbo_stream.update(:save_status, '已自动保存') }
      format.js
    end
  end
end

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