在Rails3中通过AJAX请求加载页面内容的最佳实践？

Question

假设您有一个包含两列内容的页面.无论出于何种原因,您希望通过AJAX请求在页面加载后检索其中一列的HTML内容.用户无需采取措施来加载内容(没有链接点击或表单提交),它只是自动发生.

我可以通过在主响应中返回一个空占位符div来轻松完成此操作

<div id="pink-dancing-elephants"></div>

然后在页面中添加一点jQuery

$.ajax({
    url: "/elephants/dancing/pink",
    cache: false,
    success: function(html){
      $("#pink-dancing-elephants").append(html);
    }
});

并且对/ elephants/dancing/pink的响应返回相应的HTML blob.

这一切都很好,但我想知道我是否缺少一些Rails3功能,这将使这更容易.例如,我正在寻找能够在主视图中放置如下内容的能力,其余部分由"魔法"发生

<%= render :url=>"/elephants/dancing/pink", :remote => true %>

我错过了什么吗？

Answer 1

我正在使用@ cailinanne对Dan L'帖子的评论中描述的方法,它对我来说效果很好.我喜欢附加到div的数据标签的可读性.在您的html中,您可以确切地看到将要加载到该div中的内容,如果要将此功能添加到多个div或页面,则无需添加任何新JS.

摘自这篇文章:http://tech.thereq.com/post/16479390885/loading-page-content-via-ajax-in-rails-3-1

最简单的方法是使用jQuery加载方法.

$("#comments").load("/blogs/2/comments");

尴尬的部分是AJAX路径(/ blogs/2/comments),它根据我们正在查看的博客明显改变.如果我们完全遵循jQuery文档,我们可以在HTML主体的中间放置一个脚本标记,这样在我们的模板文件中我们可能会有类似的东西.

# show.html.erb

<div id="comments"></div>
<script>
  $("#comments").load("<%= blog_comments_path(@blog)%>");
</script>

呸.不是混合到我的模板文件中的javascript粉丝.

该怎么做？遵循Rails UJS建议的模式,并利用新的HTML数据属性.

首先,当您要在页面中加载AJAX内容时,请在模板中执行以下操作

#show.html.erb

<div id="comments" data-load="<%= blog_comments_path(@blog. :format => :js)%>">
</div>

其次,将以下内容添加到application.js中

# application.js or any JS file loaded within application.js

$("div[data-load]").filter(":visible").each(function(){

  var path = $(this).attr('data-load');
  $(this).load(path);

});

第三,设置一个匹配对blog_comments的get请求的路由(键入rake routes以查看路由的命名方式)

# routes.rb

# ajax load at page load
  get "/blogs/comments" => "blogs#comments"

瞧!你的评论div将被/ blogs/3/comments路径返回的任何东西神奇地填充!

Answer 2

我认为我最初概述的实际上是最好的方法.

首先在主视图中放置一个空的占位符div

<div id="recent_posts"></div>

然后在页面中添加一点jQuery

$.ajax({
    url: "/posts/recent",
    cache: false,
    success: function(html){
      $("#recent_posts").append(html);
    }
});

并且对/ posts/recent的响应操作返回要填充div的HTML blob.在AJAX请求调用的操作中,您需要使用:layout => false进行渲染,以使返回的HTML blob不包含整个框架.例如

# posts_controller.rb
def recent
  @recent_posts = #whatever
  render :layout => false
end

这将在views/posts/recent.html.erb中呈现模板,然后jQuery将负责将呈现的内容插入到占位符div中.