Javascript 如何通过Ajax向Ruby控制器提交表单数据？

在我的视图中，我有一个语义表单，它设置了一个搜索过滤器，并通过一个按钮添加了更多过滤器，该按钮通过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调用：

$("#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]);
  }
});

任何帮助都将不胜感激

• 不要在表单的提交事件中同时使用

  remote:true

  和ajax调用

• 如果您自己进行ajax调用，那么您肯定需要使用

  数据：$（“form”）.serialize（）传递参数。

• 您必须返回false，或者在submit事件中执行e.preventDefault（），因为您实际上不希望表单被提交，因为您自己通过ajax调用发送数据

• 这个处理ajax表单的插件非常棒：

---

我建议您尝试处理错误，至少看看您会遇到什么样的错误。也许你可以监视（在Chrome开发工具的“网络”选项卡中），看看是否真的触发了呼叫。谢谢！拿出我的JS并简单地使用了remote：真的，愚蠢的错误！

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

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