如何通过 Ajax 向我的 Ruby 控制器提交表单数据？答案

【问题标题】：How do I submit form data to my Ruby Controller via Ajax?如何通过 Ajax 向我的 Ruby 控制器提交表单数据？
【发布时间】：2013-03-14 16:16:16
【问题描述】：

在我的视图中有一个semantic_form_for，它设置了一个搜索过滤器，并通过一个按钮添加了更多过滤器，该按钮通过JavaScript添加了更多过滤器。

 <%= semantic_form_for current_coach, :remote => true, :html => { :class => "custom-form rb-form", :id => "filter", :'data-url' => "#{roster_builder_coach_index_path}" } do |f| %>
  <div class="filter_parent_container">
    <% @search.conditions.each do |condition| %>
        <%= render "filter", :condition => condition %>
    <% end %>
  </div>

  <div class="bottom-info">
    <div class="count">
      <p class="num"><%= @athletes.count %></p>
      <p>identified with this filter set</p>
    </div>
    <input type="submit" class="send-request" id="search-button" value="" />
    <input type="button" class="add_filter" value="Add Another Filter" />
  </div>
  <div class="cl">&nbsp;</div>
<% end %>

我需要通过 ajax 提交表单，但不是。我正在检查控制器中的参数，它们是：

{"action"=>"roster_builder", "controller"=>"coach"}

这是控制器（记录器正在检查参数）：

def roster_builder
authorize! :access_roster_builder, current_coach

logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info(params);
@search = Search.new(sport: current_coach.primary_sport, conditions: params[:search])
@athletes = @search.query.page(params[:page]).per_page(8)

render "athletes" if request.format.js?
end

这是 Ajax 调用：

$("#filter").submit(function(){
  $.ajax({
    url: $("#filter").attr("data-url"),
    type: 'POST',
    success: function(data) {
      $(".results")[0].parentNode.removeChild($(".results")[0]);
    }
  });
});

在我使用 :remote => true 之前，它可以工作，但我需要过滤器（包括通过 JS 添加的过滤器）的持久性，所以我需要 Ajax 来执行搜索而不是刷新页面。既然 Ajax 正在发送表单数据，为什么 params 不能正常工作？我什至尝试通过 Ajax 将数据作为序列化发送，但无济于事，如下：

$.ajax({
  url: $("#filter").attr("data-url"),
  type: 'POST',
  data: $("form#filter").serialize(),
  success: function(data) {
    $(".results")[0].parentNode.removeChild($(".results")[0]);
  }
});

任何帮助将不胜感激！

【问题讨论】：

我建议你尝试处理错误，至少看看你得到什么样的错误。也许您可以监控（在 Chrome 开发工具的网络选项卡中）以查看是否实际触发了呼叫。

标签： javascript ruby-on-rails ruby ajax controller

【解决方案1】：

不要在表单的提交事件中同时使用 remote: true 和 ajax 调用。
如果你自己调用ajax，那么你肯定需要用data: $("form").serialize()传递参数
您必须在提交事件中返回 false 或执行 e.preventDefault()，因为您实际上并不希望提交表单，因为您自己使用 ajax 调用发送数据。
这个处理 ajax 表单的插件很棒：http://www.malsup.com/jquery/form/

【讨论】：

谢谢！取出我的 JS 并简单地使用远程：真，愚蠢的错误！