Rails中使用remote: true提交表单并获取返回值的方法
解决Rails remote: true表单无法获取返回结果的问题
嘿,我来帮你搞定这个问题!首先你要知道,remote: true是靠Rails UJS(Unobtrusive JavaScript)来实现AJAX提交的,你直接调用原生DOM的submit()方法会绕过UJS的处理逻辑,这就是你拿不到返回结果的关键原因之一。下面给你几个Rails原生的简便实现方式,用jQuery就能轻松搞定:
1. 正确触发表单的AJAX提交
别再用document.getElementById('ttform').submit()了,改用jQuery的submit()方法,这样UJS才会接管AJAX提交流程:
$('#ttform').submit();
2. 监听UJS的AJAX事件获取返回值
Rails UJS提供了一系列自定义事件,你可以用jQuery监听这些事件来接收和处理返回结果:
ajax:success:请求成功时触发,能直接拿到控制器返回的JSON数据ajax:error:请求失败时触发,可捕获错误信息ajax:complete:请求完成(无论成败)时触发
示例代码如下,直接放到你的JS文件里就行:
// 监听表单的ajax成功事件 $('#ttform').on('ajax:success', function(event, data, status, xhr) { // data就是控制器返回的JSON对象,直接用就行 console.log('拿到返回结果啦:', data); // 这里可以写你要做的操作,比如更新页面内容 alert('请求成功!返回内容:' + JSON.stringify(data)); }).on('ajax:error', function(event, xhr, status, error) { // 处理请求失败的情况 console.log('请求出错了:', error); alert('请求失败,请稍后重试'); });
3. 确保控制器正确返回JSON
你的控制器step2方法要保证正确渲染JSON数据,比如:
def step2 # 这里写你的业务逻辑,比如获取参数、处理数据 # 举个例子,假设你要返回一些结果 response_data = { status: 'success', message: '处理完成', result: params[:your_param] # 这里替换成你的实际数据 } respond_to do |format| format.json { render json: response_data } # 关键是这行,返回JSON format.html { # 如果你需要HTML格式的返回可以保留,否则也可以删掉 puts '********* HTML请求处理' # ... 你的HTML逻辑 } end end
额外注意事项
- 确保你的页面已经加载了Rails UJS:Rails 6+要在
application.js里导入@rails/ujs并启动,比如import Rails from "@rails/ujs"; Rails.start();;Rails 5及以前要在application.js里加//= require rails-ujs。 - 确保jQuery已经正确加载,Rails项目可以通过
jquery-railsgem来引入。
这样调整之后,你就能正常获取到控制器返回的JSON结果啦!
内容的提问来源于stack exchange,提问作者Gregoire Mulliez




