Javascript获得Rails Ajax请求响应后重做html

Question

我希望我的索引根据价格降低和价格上升而改变，就像亚马逊一样。

现在，我发送一个ajax请求到站点，用select的新值请求数据。该网站从数据库获取数据并对其进行分类。

我的JavaScript如何重新绘制我的索引页中的排序书籍响应卡？

BookController.rb

def index 
    if params.dig("book", "title").nil? && params.dig("users", "university").nil? 
    @books = Book.where({title: params.dig("book", "title")}) 
    .joins(:user).where(users: {university: params.dig("users", "university")}) 
    elsif !params.dig("book", "title").nil? && params.dig("users", "university").nil? 
    @books = Book.where({title: params.dig("book", "title")}) 
    elsif params.dig("book", "title").nil? && !params.dig("users", "university").nil? 
    @books = Book.joins(:user).where(users: {university: params.dig("users", "university")}) 
    else 
    @books = Book.all 
    end 
    case params[:sort] 
    when "Price Descending" 
     @books.order(price_cents: "DESC") 
    when "Price Ascending" 
     @books.order(price_cents: "ASC") 
    else 
     @books.sort_by(&:created_at) 
    end 
end 

书Index.html.erb

<select id="priceSelect"> 
    <option value="Best Results" selected="selected">Best Results</option> 
    <option value="Price Descending">Price Descending</option> 
    <option value="Price Ascending">Price Ascending</option> 
</select> 

. 
. 
. 

<% @books.each do |book| %> 
    <div class="col-xs-12 selectable-card"> 
    <%= link_to book_path(book.id) do %> 
     ... 
    <% end %> 
    </div> 
<% end %> 

<script> 
    $('#priceSelect').change(function(){ 
    $.ajax({ 
     url: "books", 
     type: "GET", 
     data: {sort: $('#priceSelect :selected').val()}, 
     success:function(result){ 
     console.log(result); 
     }, 
    }) 
    }); 
</script> 

而且最后我的routes.rb

resources :books do 
    resources :users 
end 

Answer 1

这个答案可能有语法错误或其他问题我在这里写了，没有测试。这只是一个指导如何做到这一点。采取这些想法并纠正任何可能的问题。

在你的控制器，你可以返回一个JSON对象：

respond_to do |format| 
    format.html 
    format.json { render json: @books } 
end 

在HTML中，添加一个div标记，以区域替换：

<div class ="books-info"> 
    <% @books.each do |book| %> 
    <div class="col-xs-12 selectable-card"> 
     <%= link_to book_path(book.id) do %> 
     ... 
     <% end %> 
    </div> 
    <% end %> 
</div> 

在JavaScript中，你应该处理JSON响应并构建html来替换原始列表：

<script> 
    $('#priceSelect').change(function(){ 
    $.ajax({ 
     url: "books", 
     type: "GET", 
     data: {sort: $('#priceSelect :selected').val()}, 
     success:function(ret){ 
     // new code; 
     var books = JSON.parse(ret); // Not sure if necessary or you can use 'ret'    
     var length = books.length; 
     var html = ""; 
     for (var i = 0; i < length; i++) { 
      html += "<div class='col-xs-12 selectable-card'>"; 
      html += "<a href='" + books[i].id + "'>" + books[i].name + "</a>"; 
      html += "</div>"; 
     } 
     $('.books-info').innerHTML = html 
     }, 
    }) 
    }); 
</script>