Rails Ajax予期しないトークン<位置0のJSONで

Question

私のインデックスを価格の降順およびAmazonのような昇順で変更します。

今、私はサイトにajaxリクエストを送信し、selectの新しい値がデータを要求しています。サイトはデータベースからデータを取得してソートします。その後、私のjavascriptはソートされたブックの応答でインデックスページのカードを再描画します。

しかし、私はconsole.logの結果、私は全体のHTMLページを取得します。
以下のコードのこの行は私にエラーを与える：

var books = JSON.parse(result); 

Unexpected token < in JSON at position 0 BookController.rb

どのように私は@booksを得ることができますか？以下
は私のコードです：

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 
    respond_to do |format| 
    format.html 
    format.json { render json: @books } 
    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> 
. 
. 
. 
<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> 

<script> 
    $('#priceSelect').change(function(){ 
    $.ajax({ 
     url: "books", 
     type: "GET", 
     data: {sort: $('#priceSelect :selected').val()}, 
     success:function(ret){ 
     console.log(ret); 
     var books = JSON.parse(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> 

そして最後に、私のroutes.rbを

resources :books do 
    resources :users 
end 

Answer 1

私はあなたが実際に戻って再びHTMLページを取得しているので、あなたのAjaxリクエストにAcceptヘッダーが欠落していると思います。

試してみてください。

$.ajax({ 
    dataType: 'json', 
    ... 
}); 

Answer 2

変更この

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

：

render json: {data: @books}