如何在Rails中实现异步调用并将结果追加至当前查询页？

我完全懂你的需求——把原本跳转到新页面的查询结果，直接追加到当前查询页的指定位置，不用刷新整个页面对吧？这在Rails里用AJAX就能轻松搞定，我给你一步步拆解操作：

1. 修改表单，启用AJAX提交 #

首先，给现有的form_tag添加remote: true选项，告诉Rails这是一个异步提交的表单，同时给表单加个ID方便后续处理事件：

= form_tag({controller: "r4d", action: "result"}, method: :get, remote: true, id: "r4d-search-form") do
  # 你的下拉选择框（比如用户选择的查询参数）
  = select_tag :query_param, options_for_select([["选项1", "value1"], ["选项2", "value2"]])
  # 提交按钮
  = submit_tag "执行查询"

2. 调整控制器的result动作，支持JS响应 #

原来的控制器可能只返回HTML页面，现在需要让它能响应JS格式的请求，这样才能返回一段JS代码来更新当前页面：

def result
  # 这里是你的数据库查询逻辑，根据用户下拉选择的参数获取结果
  @results = YourModel.where(condition: params[:query_param])
  
  respond_to do |format|
    format.js # 会自动渲染app/views/r4d/result.js.erb文件
    format.html # 保留原来的HTML响应，兼容旧的跳转模式（可选）
  end
end

3. 创建JS模板，处理结果渲染 #

在app/views/r4d目录下新建result.js.erb文件，这个文件里的代码会在AJAX请求成功后执行，用来把结果插入到当前页面：

// 先清空之前的结果（如果需要保留历史结果，可以去掉empty()）
$('#results-container').empty();

// 把渲染好的结果HTML追加到容器里，j()用来安全转义HTML内容
$('#results-container').append("<%= j render partial: 'r4d/results', locals: { results: @results } %>");

4. 编写结果展示的Partial #

为了让代码更整洁，把结果的HTML结构写到一个Partial里，新建app/views/r4d/_results.html.haml：

%div.results-section
  %h3 查询结果（共#{results.count}条）
  - results.each do |item|
    %div.result-card
      %p= item.field_name1
      %p= item.field_name2
      # 根据你的数据结构添加更多字段

5. 在查询页添加结果容器 #

最后，回到你的rtes/r4d.html.haml，在表单下方添加一个用来存放结果的容器：

# 表单代码...

%div#results-container
  <!-- 异步查询的结果会被插入到这里 -->

# 可选：添加加载提示，提升用户体验
%div#loading-indicator{style: "display: none; margin-top: 10px;"}
  %span 正在查询，请稍候...

如果要加入加载状态的处理，可以在r4d.html.haml里补充提交事件监听：

:javascript
  $(document).on('submit', '#r4d-search-form', function() {
    $('#loading-indicator').show();
  });

然后在result.js.erb最后隐藏加载提示：

$('#loading-indicator').hide();

这样一套流程走下来，用户选择下拉框点击提交后，页面不会刷新，结果会自动加载并展示在表单下方啦。

内容的提问来源于stack exchange，提问作者santhosh kumar