如何点击链接发起GET Ajax请求并在指定div上渲染局部视图？

我来一步步帮你搞定这个需求，这在Rails开发里是非常常见的局部刷新场景，咱们从路由、链接、响应模板这几个核心部分逐一说明：

1. 定义正确的路由 #

首先得给你的archive动作配置路由，要明确指定响应格式为JS，这样Rails才会优先找对应的.js.erb模板。假设你的archive动作属于AppointmentsController（如果不是，替换成你的控制器名称就行），在config/routes.rb里添加：

get '/appointments/archive', to: 'appointments#archive', format: :js, as: :appointments_archive

• format: :js：强制这个路由只响应JS格式的请求，避免和HTML请求混淆
• as: :appointments_archive：生成路由辅助方法appointments_archive_path，之后在视图里可以直接用这个方法生成链接地址

2. 导航栏的Ajax链接 #

接下来在导航栏里创建能触发Ajax请求的链接，Rails的link_to助手配合remote: true参数就能自动完成Ajax请求的封装（这是Rails UJS的功能）：

<!-- 导航栏中的链接代码 -->
<%= link_to '已归档预约', appointments_archive_path, remote: true, class: 'nav-link' %>

• remote: true：告诉Rails UJS这个链接要发起Ajax GET请求，并且请求头会带上Accept: text/javascript，告诉服务器我们期望JS格式的响应

3. 确保控制器动作就绪 #

你已经写好的archive动作不需要大改，只要确保@archives变量能正确获取分页后的预约数据就行：

# app/controllers/appointments_controller.rb
def archive
  @archives = current_user.past_appointments.paginate(page: params[:page], per_page: PAGINATION_PAGES)
end

4. 创建JS响应模板 #

现在要创建对应的.js.erb模板，用来处理Ajax请求的响应，把局部视图渲染到目标#app_past元素里。在app/views/appointments/目录下新建archive.js.erb文件，内容如下：

// 把渲染好的局部视图插入到#app_past中
$('#app_past').html("<%= j render partial: 'appointments/appointments', locals: { appointments: @archives } %>");

• j是escape_javascript的简写，用来转义局部视图里的HTML特殊字符（比如换行、引号），避免出现JS语法错误
• partial: 'appointments/appointments'：这里假设你的预约列表局部视图是app/views/appointments/_appointments.html.erb，如果你的局部视图名称不同，记得替换
• locals: { appointments: @archives }：把控制器里的@archives变量传递给局部视图使用

5. 局部视图与分页的Ajax兼容 #

最后，你的局部视图（比如_appointments.html.erb）要能正确显示预约列表，同时分页链接也要支持Ajax，这样点击分页按钮时也能局部刷新：

<!-- app/views/appointments/_appointments.html.erb -->
<% appointments.each do |appointment| %>
  <div class="appointment-card">
    <h4><%= appointment.title %></h4>
    <p>时间：<%= appointment.start_time.strftime('%Y年%m月%d日 %H:%M') %></p>
    <!-- 其他预约信息 -->
  </div>
<% end %>

<!-- 分页链接要加上remote: true，确保分页也是Ajax请求 -->
<%= will_paginate appointments, remote: true %>

额外注意事项 #

• 确保你的项目里已经加载了Rails UJS：如果是Rails 5.x及之前，检查app/assets/javascripts/application.js里有没有//= require rails-ujs；如果是Rails 7+用Turbo的话，可能需要调整为data-turbo="true"，但因为你明确要响应.js文件，传统UJS方式更适配你的需求
• 测试时可以打开浏览器的开发者工具（Network标签），点击链接后查看请求是否是XHR类型，响应是否是JS格式，这样能快速排查问题

内容的提问来源于stack exchange，提问作者Saura Mandal