使用ajax请求在同一页面中显示部分

Question

我是 Rails 新手，我正在尝试为学校做一个简单的项目。

我已经生成了一个脚手架，如下所示。

rails generate scaffold Book title:string content:text code:string

我想要做的是，当我点击一个链接时，在同一页面 (localhost:3000/books) 的一个 div 中显示书籍 ID 的列表。我尝试遵循this 程序，但它似乎不起作用，当我单击 /books 页面末尾的链接时，页面上没有明显呈现任何内容

这是我的书/index.html.erb

<p id="notice"><%= notice %></p>

<h1>Books</h1>

<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Content</th>
      <th>Code</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @books.each do |book| %>
      <tr>
        <td><%= book.title %></td>
        <td><%= book.content %></td>
        <td><%= book.code %></td>
        <td><%= link_to 'Show', book %></td>
        <td><%= link_to 'Edit', edit_book_path(book) %></td>
        <td><%= link_to 'Destroy', book, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Book', new_book_path %>

<br>

<%= link_to 'All books', books_path, remote: true %>
<br>
<br>
<div id="content" >
</div>

我的 books_controller 的索引方法

def index
    @books = Book.all

    respond_to do |format|
      format.html
      format.js
    end
  end

_books 部分

<% @books.each do |book| %>
    <div class="book">
      <%= book.id %>
    </div>
<% end %>

还有书籍/index.js.erb

$("#content").html("<%= j (render 'books') %>");

当我点击应该呈现部分的链接时，我在终端中得到了这个，页面上没有显示任何内容。

Started GET "/books" for 127.0.0.1 at 2017-05-12 17:35:02 +0200
Processing by BooksController#index as JS
  Rendering books/index.js.erb
  Book Load (0.3ms)  SELECT "books".* FROM "books"
  Rendered books/_books.html.erb (2.4ms) [cache miss]
  Rendered books/index.js.erb (3.9ms)
Completed 200 OK in 8ms (Views: 6.0ms | ActiveRecord: 0.3ms)

我想我错过了什么，但我真的不知道为什么。有任何想法吗？谢谢

PS：Rails 版本：5.1.0 和 ruby​​ 2.4.0

Answer 1

Rails 5.1 不依赖于 jQuery。这段代码：

$('#content').html("<%= j (render 'books') %>");

是 jQuery 代码。如果您添加 jquery-rails gem 并按照文档操作，您的代码应该可以工作。

Answer 2

我不确定您的代码的问题出在哪里，但我可以建议对我来说更优雅的替代方案。我建议将 jquery onClick 处理程序绑定到您的链接，并让它向服务器执行 ajax 请求 - 到不同的视图或重新编码相同的视图 - 发送回一个包含所有数据的 json 对象，ajax 成功处理程序可以然后操作页面内的html。像这样的：

$("#all_books_link").click(function() {
  $.ajax({
     dataType: "json",
     url: <PUT ALL BOOKS SERVER URL HERE>,
     success:function(data) {
        for (var key in data) {
           $("#content").append("<div>"+data[key]+"</div>"
        }
     }
   });
});

您的服务器端 rails 函数应该返回一个 json 对象，而不是实际的 HTML。