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

假设您有一个包含两列内容的页面。无论出于何种原因，您都希望在页面加载后通过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);
    }
});

并且具有对/equals/跳舞/prink的响应返回相应的HTML斑点的动作。

这一切都很好，但我想知道我是否错过了Rails3的一些功能，这些功能会让这件事变得更容易。例如，我正在寻找一种能力，可以在主视图中放置以下内容，并通过"魔术"完成其余内容

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

我是不是错过了什么？

我使用的是@cailianne对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混合到我的模板文件中。

该怎么办？遵循RailsUJS建议的模式，并利用新的HTML数据属性。

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

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

其次，将以下内容添加到您的应用程序.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"

瞧！您的commentsdiv将神奇地被/blogs/3/comments路径返回的内容填充！

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

首先在主视图中放置一个空的占位符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中。

有一种简单的资源方法，只需将respond_to :html, :js添加到控制器中，并在app/views/目录中创建*.js.erb视图。然后，您的控制器将能够响应javascript格式，并且您可以在*.js.erb文件中使用ruby代码编写javascript
看看这个：Rails 3 中的Unobtrusive javascript

如果您想使用OP提出的方法，我建议将其移动到一个单独的application.js文件中，并使用不引人注目的js。我不建议将JS内联在页面上。

# index.html.erb
<div id="content"></div>
# application.js
$(function() {
  $.ajax({
    url: "...",
    success: function (html) {
      $("#content").append(html);
    }
  });
});
# controller.rb
# empty placeholder
def index
end

这会自动触发ajax请求，而无需将其放在每一页上。这是更好的练习。我不会称之为最优，但轻微的m

相关内容

最新更新

热门标签：