Ruby on Rails搜索后分页报404错误求助（pg_search+will_paginate）

这个问题我之前也碰到过，核心原因是请求方法不匹配导致的，咱们一步步来理清楚：

问题根源 #

你在路由里把search定义成了post请求：

resources :activities do
  post :search, on: :collection
end

而will_paginate生成的分页链接默认是GET请求。当你完成搜索后点击下一页，浏览器会发送带page参数的GET请求，但你的路由里并没有匹配这个GET请求的search路由，自然就触发404了。而未搜索时的分页是基于activities#index的GET请求，所以一切正常。

解决方案 #

方案1：将搜索改为GET请求（推荐） #

这是更符合Web最佳实践的方式——搜索结果应该是可书签、可分享的，GET请求正好满足这个需求。

1. 修改路由，把post改成get：

resources :activities do
  get :search, on: :collection
end

2. 调整搜索表单的请求方法为GET：

<%= form_tag search_activities_path, method: :get, id: "search-form" do %>
  <%= text_field_tag :query, params[:query] %>
  <%= submit_tag "搜索" %>
<% end %>

3. 控制器里的search方法不需要大改，只要确保能接收params[:query]和params[:page]即可：

def search
  @activities = Activity.search(params[:query]).paginate(page: params[:page], per_page: 10)
  render :index # 或者你自定义的搜索结果模板
end

这样分页链接会自动带上query和page参数，GET请求能匹配到路由，就不会出现404了。

方案2：保留POST请求（适合特殊场景） #

如果因为搜索参数过多、包含敏感信息等原因必须用POST，那需要让分页链接也发送POST请求，同时带上搜索参数。可以用JavaScript来处理：

1. 给搜索表单加个ID，方便获取：

<%= form_tag search_activities_path, method: :post, id: "search-form" do %>
  <%= text_field_tag :query, params[:query] %>
  <%= submit_tag "搜索" %>
<% end %>

2. 添加JavaScript监听分页链接的点击事件，把GET请求转为POST：

document.addEventListener('DOMContentLoaded', function() {
  // 监听所有分页链接点击
  document.querySelectorAll('.pagination a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认的GET跳转
      
      // 提取page参数
      const pageParam = new URL(this.href).searchParams.get('page');
      // 获取搜索表单的所有数据
      const formData = new FormData(document.getElementById('search-form'));
      // 添加page参数到表单数据
      formData.append('page', pageParam);
      
      // 发送POST请求
      fetch(this.href.split('?')[0], {
        method: 'POST',
        body: formData,
        headers: {
          // 带上Rails的CSRF令牌，避免422错误
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
        }
      })
      .then(response => response.text())
      .then(html => {
        // 替换页面中的活动列表内容
        document.getElementById('activities-container').innerHTML = html;
        // 重新绑定分页链接的事件（因为DOM更新了）
        bindPaginationEvents();
      });
    });
  });
});

// 封装绑定事件的函数，方便DOM更新后复用
function bindPaginationEvents() {
  document.querySelectorAll('.pagination a').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const pageParam = new URL(this.href).searchParams.get('page');
      const formData = new FormData(document.getElementById('search-form'));
      formData.append('page', pageParam);
      
      fetch(this.href.split('?')[0], {
        method: 'POST',
        body: formData,
        headers: {
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
        }
      })
      .then(response => response.text())
      .then(html => {
        document.getElementById('activities-container').innerHTML = html;
        bindPaginationEvents();
      });
    });
  });
}

3. 控制器里确保能正确处理POST请求的page参数：

def search
  @activities = Activity.search(params[:query]).paginate(page: params[:page], per_page: 10)
  # 如果是AJAX请求，渲染局部模板；否则渲染完整页面
  respond_to do |format|
    format.html
    format.js
  end
end

注意事项 #

• 优先选择方案1，GET请求的搜索结果更符合用户使用习惯，也便于SEO。
• 用方案2时，一定要处理CSRF令牌，否则会触发422错误。

内容的提问来源于stack exchange，提问作者Zilong Tian