Question

我的预告片索引页面上有一个复选框，选中后应该过滤结果。

trailers_controller：

class TrailersController < ApplicationController
  respond_to :html, :js

  def index
    trailers = Trailer.last(40).sort_by(&:published_at).reverse
    trailers = trailers.select { |t| t.budget == "blockbuster" } if params[:show_indie] && params[:show_indie] == "false"
    @trailers = Kaminari.paginate_array(trailers).page(params[:page]).per(6)
  end    
end

我的观点：

<div class="trailers">
  <%= render @trailers %>
</div>

我的js：

<script>
$(function(){

  $('.checkbox-inline').on('change', function() {
    var show_indie = $(this).find('input').prop('checked')

      $.ajax({
        url: '/trailers/filter',
        type: "post",
        async:true,
        dataType: "html",
        data: {show_indie},
        success: function() {
          console.log ("filtered")
        },
        error: function(){
          console.log ("error with ajax")
        }

    });

    })


});

</script>

路线：

  post 'trailers/filter' => 'trailers#index'

我的index.js.erb：

console.log('index js loaded')

$('.trailers').html("<%= escape_javascript render(@trailers) %>");

一切似乎都有效，AJAX发布好了。但是index.js.erb没有渲染。我有一种感觉，因为我的dataType是“html”而不是JSON或者其他东西..但不确定它是如何工作的，或者如何解决它。

我做错了什么？
这是处理这种过滤的最佳方式吗？

Answer 1

您需要将dataType指定为“script”

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

Answer 2

要添加答案，您需要记住不要直接在视图中存储javascript。使您的应用程序高效运行＆amp;正确地说，您需要使用unobtrusive javascript模式：

#app/assets/javascripts/application.js
$(document).on('change', '.checkbox-inline', function() {
    var show_indie = $(this).find('input').prop('checked')

      $.ajax({
        url: '/trailers/filter',
        type: "post",
        dataType: "script",
        data: {show_indie},
        success: function() {
          console.log ("filtered")
        },
        error: function(){
          console.log ("error with ajax")
        }

    });

});

这不仅可以释放您的观点，还可以让您将JS纳入资产管道，从而提高效率。

Rails：简单的Ajax帖子来过滤索引结果

2 个答案: