ActiveAdmin：如何通过AJAX实现表单提交按钮发送HTTP请求

嘿，我完全理解作为非Ruby开发者刚接触ActiveAdmin时的困惑——这个框架确实有一套自己的规则！咱们一步步把你的表单改成AJAX无刷新提交：

1. 修正并调整ActiveAdmin表单代码 #

你当前的表单存在一些语法问题，同时需要开启Rails的UJS支持（这是实现AJAX无刷新的核心）。修改后的代码如下：

form url: "http://localhost:3000/test", method: :post, remote: true, html: { data: { type: :json } } do |f|
  f.input :my_field, as: :text, input_html: { name: 'test_field' }
  f.actions do
    f.action :submit, label: '提交'
  end
end

这里的关键改动：

• 添加remote: true：告诉Rails这是AJAX表单，不会触发页面跳转
• html: { data: { type: :json } }：指定期望服务器返回JSON格式响应（可根据需求改成:js）
• 用f.actions包裹提交按钮：这是ActiveAdmin推荐的按钮写法
• 修正输入类型写法为as: :text，并把name属性放在input_html配置项里

2. 编写AJAX回调的JavaScript逻辑 #

因为启用了remote: true，Rails UJS会自动触发一系列AJAX事件，你可以在ActiveAdmin的自定义JS文件（比如app/assets/javascripts/active_admin.js）里添加回调：

// 监听表单AJAX成功事件
$(document).on('ajax:success', 'form[remote=true]', function(event, data, status, xhr) {
  // 成功后的自定义逻辑，比如提示用户、清空表单
  alert('提交成功！');
  $(this)[0].reset();
});

// 监听AJAX失败事件
$(document).on('ajax:error', 'form[remote=true]', function(event, xhr, status, error) {
  // 失败后的处理，比如显示错误信息
  alert('提交失败：' + error);
});

如果用CoffeeScript的话，代码会更简洁：

$(document).on 'ajax:success', 'form[remote=true]', (event, data, status, xhr) ->
  alert '提交成功！'
  $(this)[0].reset()

$(document).on 'ajax:error', 'form[remote=true]', (event, xhr, status, error) ->
  alert "提交失败：#{error}"

3. 确保目标服务器的响应符合要求 #

因为你是提交到外部服务器（localhost:3000/test），需要注意两点：

• 目标端点要返回JSON格式的响应，比如在Rails控制器里可以这么写：

def test
  # 处理提交的数据逻辑
  # ...
  render json: { status: 'success', message: '数据已接收' }, status: :ok
end

• 目标服务器要配置CORS，允许你的ActiveAdmin应用跨域请求。在目标Rails应用的config/initializers/cors.rb里添加：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '你的ActiveAdmin应用域名' # 比如 'http://localhost:8080'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

这样调整后，你的表单就能实现无跳转的AJAX提交了，提交成功或失败都会在当前页面触发对应的反馈，不会跳转到目标端点。

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