从Rails Ajax请求获得响应后重新生成html的Javascript

我希望我的指数能像亚马逊一样，随着价格的下降和上升而变化

现在，我向站点发送一个ajax请求，并使用select的新值请求数据。该站点从数据库获取数据并对其进行排序

我的javascript如何使用已排序的book响应重新绘制索引页面中的卡片

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

Book 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>

---

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

在控制器中，可以返回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>

---

我是否写下要做的回复|格式|。。。在我的索引簿控制器的底部，或者我必须把代码放在哪里？是的。在底部。你的ret是我的结果。不知何故，如果我使用console.logret，它会提供整个html。使用var books=JSON.parseret在JSON中的位置0处为我提供了一个意外的标记。所以我尝试使用var books=ret，但使用它并没有改变任何事情。使用此方法不会出现错误，尽管您可能必须将dataType=json添加到Ajax请求中。

<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>