如何使用提交更改我的常规过滤器表单以使用 AJAX？答案

【问题标题】：How can I change my regular filter form using a submit, to use AJAX?如何使用提交更改我的常规过滤器表单以使用 AJAX？
【发布时间】：2011-09-19 21:31:28
【问题描述】：

我有一张场地表。场地索引页面默认列出所有场地记录，并允许您使用同一页面上的表单按区域和/或类型过滤它们，并带有提交按钮和页面重新加载。

然后显示找到的所有场所，并且表单会自行重置。

如何在不重新加载页面的情况下仅通过单击不同的过滤器选项来更新场所列表？所以没有提交按钮，表单保持更改状态。

场地控制器

  def index
    if
      @venues = Venue.with_type(params[:venuetypes]).with_area(params[:areas]).order("average_rating DESC").all
    else
      @venues = Venue.all
    end
    @venues = @venues.paginate :per_page => 15, :page => params[:page]
  end

场地 index.html.erb 这已经在使用 jQuery-UI 来获得更好看的复选框

<div class="filter_options_container">
  <%= form_tag '', :method => :get, :id => 'filter_form' do %>

    <fieldset class="filter_form_fieldset venuetypes">
      <% Venuetype.all.each do |v| %>
        <p class="venuetype_check"><%= check_box_tag 'venuetypes[]', v.id, false, :id => "venuetype-#{v.id}" %>
        <label for="venuetype-<%= v.id %>"><%= v.name %></label></p>
      <% end %>
    </fieldset>

    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
        <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p>
      <% end %>
    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
  <% end %>
</div>

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>
  <div class="clearall"></div>

  <div class="paginate_container">
    <div class="paginate">
      <%= will_paginate @venues %>
    </div>
  </div>
</div>

非常感谢您提供的任何帮助！

【问题讨论】：

标签： ruby-on-rails ajax forms jquery filter

【解决方案1】：

您可能想使用 jquery 来做到这一点。

最简单的方法是使用 jquery 在点击过滤器时自动发送表单，仍然会重新加载页面但访问者不必点击提交按钮。

代码将类似于：

$(".checkbox-which-send-form-when-clicked").change(function(e){
  $(this).parents("form:first").submit();
});

请阅读jquery website上的文档

另一个不会在每次单击复选框时重新加载页面的解决方案是使用 Ajax 请求发送表单并获取结果。一个很好的教程可以找到here

【讨论】：

【解决方案2】：

所以我根本不了解 Ruby，但我知道您需要使用 jQuery 实现的架构。首先，您需要设置一个将 JSON 返回给客户端的端点。当用户创建、修改或只是简单地提交过滤器表单时，您将发布或获取 JSON 端点。它是您的选择，您可以在用户更改每个字段时检索它，或者仅在单击提交按钮时检索它，这完全取决于您想要使其具有何种交互性。

您将使用 jQuery $.ajax 函数来检索 JSON。我建议使用 $.post 或 $.get 来检索更新的数据。jQuery AJAX Shorthand functions

您还可以为表单提交按钮设置单击事件处理程序。它可能看起来像这样，使用 e.preventDefault 很重要，因为这可以防止整个页面回发。

$("form :submit").click(function(e){

e.preventDefault();

$.getJSON([你的 AJAX url], [来自过滤器的数据], function(result){ //使用模板更新表 });

});

在 $getJSON 回调中，我建议使用 jQuery 模板或其他一些模板合并功能，例如 Resig 的微模板。

我写了一系列关于在 ASP.NET 中做这类事情的博客文章。它应该很好地为您翻译成 Ruby，只需用您的 Ruby 服务器端替换 ASP.NET 的东西，您就可以开始了。

My Thin ASP.NET Series

【讨论】：