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

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

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

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

我想做的是，当我点击一个链接时，在同一页面localhost:3000/books的div中显示一个图书id列表。我尝试按照这个过程操作，但似乎不起作用，当我单击/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.each do |book| %>
    <div class="book">
      <%= book.id %>
    </div>
<% end %>

我想我错过了什么，但我真的不明白为什么。有什么想法吗？多谢各位

---

PS:Rails版本：5.1.0和ruby 2.4.0不依赖于jQuery。此代码：

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

---

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

我不确定您的代码的问题出在哪里，但我可以建议，对我来说，什么是更优雅的替代方案。我建议将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

打开浏览器控制台并单击链接。您应该会看到一个请求被触发。该请求的响应是什么？我没有看到id=content的div/container，因此，我猜事情不会被替换，因为没有具有该id的容器。@fanta it'sbottom@Sebasti这里你可以找到我的代码，这就是OP的代码。它只是在Rails域中执行。@InEptSoftware，他的解决方案通过Rails部分返回HTML，并通过单独的文件执行加载的javascript。我觉得这很肮脏。我希望服务器只发送一个json对象，让jquery和其他javascript从初始页面加载开始就存在于客户机中。我想每个人都有自己的想法。我理解你的想法，但OP说他对Rails是新手。我认为在这一点上，对他来说，使用Rails约定而不是配置要容易得多。不过我还是喜欢你的回答。

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)

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

$("#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>"
        }
     }
   });
});