Rails UJS远程表单为何仅执行2XX响应JS，4XX响应不执行？

问题原因 #

jQuery 3.x搭配新版Rails UJS的错误处理逻辑，和jQuery 1.x时期完全不同。旧版本中，Rails UJS会忽略400这类客户端错误状态码，直接执行返回的JS模板；但在jQuery 3.x环境下，Rails UJS会将4xx/5xx状态码判定为请求失败，触发ajax:error事件，跳过返回JS的自动执行，导致你写的错误提示代码无法运行。

解决方案 #

方案1：改用200状态码返回错误（最简单） #

如果不纠结HTTP状态码的严格语义，直接把后端的render status: 400改成render status: 200，请求会被判定为成功，JS模板就能正常执行：

def send_appointment_request
  respond_to do |format|
    format.js do 
      if params[:name].blank?
        @error_message = "Error: You forgot to include your name. Please try again."
        render status: 200 and return # 修改为200状态码
      end
      # 省略大量代码
      @success_message = "Thanks for submitting your appointment request!"
    end
  end
end

这种方式最省心，不会触发UJS的错误拦截逻辑。

方案2：修改Rails UJS的错误处理逻辑（保留400状态码） #

如果要严格遵循HTTP规范，可在前端绑定ajax:error事件，手动提取并执行返回的JS代码。在表单所在页面添加：

document.addEventListener('ajax:error', function(event) {
  const [xhr] = event.detail;
  // 仅处理400状态码且响应为JS类型的情况
  if (xhr.status === 400 && xhr.getResponseHeader('Content-Type').includes('javascript')) {
    // 执行返回的JS代码
    eval(xhr.responseText);
    // 阻止默认错误处理，避免控制台报错
    event.preventDefault();
  }
});

注意：eval仅在你能确保返回JS安全的场景下使用（自己生成的模板无风险），避免XSS问题。

方案3：后端显式指定响应头（辅助优化） #

确保后端返回400状态码时，Content-Type正确设置为text/javascript，Rails默认会处理，但显式指定更稳妥：

render status: 400, content_type: 'text/javascript' and return

这能让前端更明确识别响应类型，配合方案2使用效果更好。

总结 #

不是必须用200状态码处理无效请求，只是新版jQuery和Rails UJS的错误逻辑发生了变化。追求快速解决选方案1，要符合HTTP规范选方案2。

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