即使使用 ajax [rails]，整个页面也会被回发答案

【问题标题】：entire page get posted back even with ajax [rails]即使使用 ajax [rails]，整个页面也会被回发
【发布时间】：2017-03-24 15:25:16
【问题描述】：

我正在做的事情应该很简单，如果请求是 http，我的页面会显示所有记录，如果是 ajax，我会在日期之间获取记录。这里页面的外观

这是 index.html.erb

<h1>Jobs History</h1>
<hr>
<div class="form-inline">
  <div class="col-md-12">
    <div class="col-md-4">
      <%= label_tag(:start_date) %>
    <div class='input-group date' id='datetimepicker2'>
      <%= text_field_tag :start_date , "", {class:'form-control'} %>
      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
    </div>
      </div>
    <div class="col-md-4">
      <%= label_tag(:end_date) %>
    <div class='input-group date' id='datetimepicker1'>
      <%= text_field_tag :end_date , "", {class:'form-control'} %>
      <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
    </div>
      </div>
    <a id="searchBtn" class="btn btn-skin btn-md"  href="#">Search</a>
  </div>
</div>
<div id="items_grid" >
<%= render partial: 'histories', locals: {bookings: @bookings} %>
</div>


<script>
  $('#datetimepicker1').datetimepicker();
  $('#datetimepicker2').datetimepicker();
  $('a#searchBtn').click(function(){
    $.ajax({
      url: "<%= provider_history_index_path %>",
      type: "GET",
      data: {start_date: $('#start_date').val(), end_date: $('#end_date').val()},
      success: function(resp){ }
    });
  });

</script>

很正常，这里是控制器：

   respond_to :html, :js
  def index
    if request.xhr?
      respond_to do |format|
        @bookings = current_user.booking_providers.where(visit_end_date:     params[:start_date]..params[:end_date])
        format.js
      end
    else
      @bookings = current_user.booking_providers
    end

这里是 index.js.erb

$("#items_grid").html("<%= escape_javascript(render partial: 'histories', locals: { bookings: @bookings} ) %>");

问题是当我填写日期并单击搜索时，ajax 启动并使用新记录渲染部分，但之后立即调用索引并发生整页回发，这会覆盖新记录。不知道为什么

【问题讨论】：

标签： jquery ruby-on-rails ajax

【解决方案1】：

我得到了reddit用户jemminger的回答，以防有人遇到类似问题

原因是因为我拦截了提交以便我可以执行 ajax 调用，但我并没有阻止表单正常发布的默认行为。每个 jQuery 点击处理程序都会收到一个事件。在事件上调用 preventDefault()。

$('a#searchBtn').click(function(evt){ /* <--- the event object is passed to your handler by jQuery */
  evt.preventDefault();  /* <--- stop it from performing its normal behavior */

  $.ajax({
    url: "<%= provider_history_index_path %>",
    type: "GET",
    data: {start_date: $('#start_date').val(), end_date: $('#end_date').val()},
    success: function(resp){ }
  });
});

【讨论】：

【解决方案2】：

您需要将索引和 ajax 调用的路由分开。或者，您必须在 if request.xhr? 块中渲染某些内容并返回。当您GET provider_history_index_path 时，将调用索引操作。

Rails 使用“约定优于配置”，因此 Rails 中的控制器会自动呈现具有与有效路由对应的名称的视图。

在你的情况下，Rails 毕竟渲染 index.html.erb。

【讨论】：