在 Rails 应用程序中，如何在 div 中加载链接而不是刷新整个页面？答案

【问题标题】：In a Rails app, how can I make a link load in a div as opposed to refreshing the whole page?在 Rails 应用程序中，如何在 div 中加载链接而不是刷新整个页面？
【发布时间】：2011-06-19 23:21:31
【问题描述】：

我还是 Web 开发的初学者。这不是我的职业。所以放轻松。

我今天开始构建一个 Rails 应用程序，并意识到如果我可以让某些链接显示在单独的 div 中而不是新页面中，或者刷新整个页面，这将使我的应用程序变得更好。我不太清楚如何搜索这个，我一直在用谷歌追逐红鲱鱼。

基本上，我在页面左侧的 div 中有一个列表，当单击该列表中的一个项目时，它应该出现在右侧 div 中。（页面上的其他内容无需更改）

这真的很简单。我需要为此使用Javascript吗？我可以摆脱 rails js 默认值，还是应该使用 JQuery？

有没有办法在没有 javascript 的情况下做到这一点？我真的只需要在这里朝着正确的方向前进，我已经厌倦了甚至不知道如何搜索这个，或者我应该阅读什么文档。

就像我说的，放轻松，你应该继续谨慎行事，并假设我什么都不知道。严重地。 :)

提前致谢，

-凯文

（顺便说一句，我正在使用 Rails 3 进行开发）

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 html link-to

【解决方案1】：

为左侧菜单上的每个项目创建要在 div 内显示的视图（连同控制器）。假设我们现在有以下结构：

Item1（点击它会获取： http://myapp.com/item1)
Item2（点击它会获取： http://myapp.com/item2)

等等…… 确保只渲染要放入内容 div 的 html。不应包含<head> <body> etc. 标签

在您的主页中，您可能会有这样的标记 >

<div id="leftMenu">
<a href="http://myapp.com/item1">Item 1</a>
<a href="http://myapp.com/item2">Item 2</a>
</div>

<div id="content">
Please click on an item on the left menu to load content here
</div>

最后，添加以下 Javascript（您需要 jQuery；相信我，这是一个不错的决定）。

$("#leftMenu a").click(function () {

   $("#content").load($(this).attr("href")); //load html from the url and put it in the #content element

   return false; //prevent the default href action

});

【讨论】：

酷。我下载了最新的 jQuery，并像这样包含它： javascript_include_tag 'jquery-1.6.1.js' 在我的 application.html.erb 我将把上面的 javascript 放在哪里？（对不起，如果这是一个愚蠢的问题，这对我来说都是新事物）
我想我在问，我是否会创建一个名为 home.js 的文件，并且仅在我想使用的唯一 javascript 时才将其放入其中？（假设我们正在谈论的路线 aobut 当前是 home.html.erb...）
您可以针对每个视图创建一个 Javascript 文件（例如，对于 my_application.html.erb，您可以使用 my_application.js）并在该文件中包含与该页面相关的所有 Javascript。这种方法存在一些性能问题，但我认为这是一个好的开始。然后你可以在你的 my_application.html.erb 中包含，就像你包含 jQuery 一样

【解决方案2】：

如果您想避免重新加载页面，您将需要 JavaScript。您可以将link_to 用于列表中的链接，并且您需要使用:remote => true 使其向服务器发送AJAX 请求。服务器将需要适当地响应并为您的 div 提供 HTML。

link_to 文档在这里：http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to（诚然，它对 AJAX 功能不是很有用）。

this thread 中的最后一篇文章展示了您可以使用的一种可能的解决方案。

【讨论】：