如何在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做法？

阅读 234

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