Rails中AJAX调用无法获取后端下拉选单数据问题

我来帮你一步步排查修复这个问题，毕竟没独立控制器的模型在API调用时确实容易踩一些小坑：

1. 先给Form API控制器添加上返回Choice数据的逻辑 #

因为Choice没有自己的控制器，你得在Form的API控制器里加一个专门的action来返回选项列表，比如：

# app/controllers/api/forms_controller.rb
class Api::FormsController < ApplicationController
  # 新增这个action用于返回所有Choice选项
  def choices
    @choices = Choice.all
    # 只返回需要的字段，避免返回冗余数据
    render json: @choices, only: [:id, :description]
  end
end

2. 配置对应的API路由 #

要让前端请求能找到这个action，得在config/routes.rb里补上路由规则：

namespace :api do
  resources :forms do
    collection do
      get 'choices' # 对应的请求路径就是 /api/forms/choices
    end
  end
end

你可以跑一下rails routes命令确认这个路由是否生成成功，避免路径写错。

3. 检查前端AJAX请求的正确性 #

你的AJAX请求要严格对应上面的路由配置，举个jQuery的例子：

$.ajax({
  url: '/api/forms/choices',
  method: 'GET',
  success: function(data) {
    // 拿到数据后填充下拉框
    const selectElement = $('#your-select-box-id');
    data.forEach(choice => {
      selectElement.append(`<option value="${choice.id}">${choice.description}</option>`);
    });
  },
  error: function(xhr) {
    // 出错时打印错误信息，方便排查
    console.log('请求失败:', xhr.responseText);
  }
});

重点确认请求URL和路由匹配，请求方式是GET，别写成POST了。

4. 先确认数据库里真的有数据 #

有时候初始化数据可能因为验证或其他原因没成功写入，你可以打开rails控制台，输入Choice.all看看返回的记录是不是你创建的那两个选项，如果是空的，重新跑一遍Choice.create!([{ description: "Choice 1" }, { description: "Choice 2" }])。

5. 排查跨域（CORS）问题（如果前后端不在同一域名） #

如果前端项目和Rails后端是分开部署的，得配置CORS允许前端跨域请求：

• 先在Gemfile里加gem 'rack-cors'，然后跑bundle install
• 在config/initializers/cors.rb里配置：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' # 生产环境记得改成你的前端域名，别用*
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

配置完记得重启Rails服务器。

6. 检查控制器的权限拦截 #

如果你的Form API控制器加了身份验证（比如Devise的authenticate_user!），要确保AJAX请求带上了正确的认证token，不然会被拦截返回401错误。

按照上面的步骤一步步排查，应该就能解决AJAX拿不到数据的问题啦！

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