我如何通过Ajax提交表单数据到我的Ruby控制器

How do I submit form data to my Ruby Controller via Ajax?

本文关键字：我的 Ruby 控制器 数据 表单 何通过 Ajax 提交      更新时间：2023-09-26

我的视图中有一个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]);
  }
});

任何帮助将不胜感激!

  • 不要在表单的提交事件中同时使用remote: true和ajax调用。

  • 如果您自己调用ajax，那么您肯定需要通过data: $("form").serialize()

    • 传递参数。

  • 你必须返回false，或者在提交事件中执行e.p preventdefault()，因为你实际上不希望表单被提交，因为你自己用ajax调用发送数据。

  • 这个插件处理ajax表单是伟大的:http://www.malsup.com/jquery/form/

相关文章：