You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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-rails gem来引入。

这样调整之后,你就能正常获取到控制器返回的JSON结果啦!

内容的提问来源于stack exchange,提问作者Gregoire Mulliez

火山引擎 最新活动