小编典典

如何在Rails中异步加载部分页面

ajax

在Rails / jquery应用程序上创建ruby时,页面的一部分很耗时。

我想更改页面的加载方式,以便大部分页面立即加载,并为占时的部分预留一个占位符以异步加载,并在完成时将其插入到带有ajax / jquery的页面中。

我现在所拥有的(简体):

app / views / sample / show.html.erb:

<div id="theResult">
    <%= render :partial => 'calculate', :object => @org) %>
</div>

而Partial将使用@org的某些部分来生成一些内容(点击另一个外部REST服务)。

app / views / sample / _calculate.html.erb

<%
    # code to take org and turn it into content
%>
<!--...html to display results here -->

我意识到这很可能违反了正确的MVC架构规则,因为我的部分似乎逻辑太多,并且也希望对其进行清理…

因此,我想我有两个问题:(1)如何使它正常工作;(2)我应该如何清理它以遵循良好的ruby / rails / mvc做法?


阅读 232

收藏
2020-07-26

共1个答案

小编典典

首先在主要回应中放置一个空的占位符div

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

然后在页面上添加一些jQuery

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

并执行对/ elephants / dancing / pink的响应,以返回要填充div的HTML
blob。在AJAX请求调用的操作中,您将需要使用:layout => false进行渲染,以防止返回的HTML Blob包含整个框架。例如

# elephants_controller.rb
def dancing
  @elephants = #whatever
  render :layout => false
end

这将在views / elephants / dancing.html.erb中呈现该模板。

2020-07-26