通过 Rails 在 Web 应用程序中使用 Ajax（2）
|
- UID
- 1066743
|
通过 Rails 在 Web 应用程序中使用 Ajax（2）
Ajax 动态搜索Prototype.js 提供了观察页面上的字段和表单的功能。我利用这种功能观察一个文本字段，可在其中输入部分菜谱名。然后运行 RecipesController 的搜索方法，输出放在文本字段下方的 <div> 标记中。首先从更新的 RecipesController 开始，如 所示。
清单 8. Recipes_controller.rb1
2
3
4
5
6
7
8
9
10
11
12
| class RecipesController < ApplicationController
...
def index
end
def search_ajax
@recipes = Recipe.find( :all,
:conditions => [ "name LIKE ?",
"%#{params[:recipe][:name]}%" ] )
render :layout=>false
end
end
|
index() 方法呈现 HTML 表单。search_ajax() 方法根据搜索参数查找菜谱并把数据发送给 ERB 模板格式化。index.rtml 模板如 所示。
清单 9. Index.rhtml1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>
<%= form_tag nil, { :id => 'search_form' } %>
<%= text_field 'recipe', 'name' %>
<%= end_form_tag %>
<div id="recipe">
</div>
<%= observe_form :search_form, :frequency => 0.5,
:update => 'recipe',
:url => { :action => 'search_ajax' } %>
</body>
</html>
|
在 的开头同样包括了 JavaScript 库。然后创建一个具有搜索字段和 <div> 标记的 form 表单用来保存搜索返回的数据。最后调用 observe_form() 辅助方法，它创建 JavaScript 代码观察表单的变化，并把表单数据发送到 search_ajax() 方法。然后将该方法的结果放到 recipe <div> 中。
search_ajax.rhtml 表单的代码如 所示。
清单 10. Search_ajax.rhtml1
2
3
4
| <% @recipes.each { |r| %>
<h1><%= r.name %></h1>
<p><%= r.description %></p>
<% } %>
|
由于搜索结果可能有多项，循环遍历菜谱列表并输出其名称和说明。
当在浏览器中打开该站点并在地址栏中输入 apple 的时候，我找到了苹果馅饼的做法，如 所示。
图 2. Ajax 动态搜索 这就是最简单的实现。但如果希望进一步了解苹果馅饼该如何做？可以使用 Ajax 在需要时动态获得配料和做法吗？很高兴您这样问！当然能！
在命令中增加内容有时候，让用户选择下载更多的信息而不是生硬地把信息堆到页面上更加友好。传统上，Web 应用程序开发人员使用隐藏的 <div> 标记包含信息，当用户要求这些资料时再显示出来。Rails 提供了一种更优美的方法，可以在需要的时候使用 Ajax 请求数据。
中的菜单模板增加了 link_to_remote() 辅助方法调用。
清单 11. Search_ajax.rhtml1
2
3
4
5
6
7
8
| <% @recipes.each { |r| %>
<h1><%= r.name %></h1>
<p><%= r.description %></p>
<div id="extra_<%= r.id %>"></div>
<%= link_to_remote 'Extra',
:url => { :action => 'get_extra_ajax', :id => r.id },
:update => "extra_#{r.id}" %>
<% } %>
|
link_to_remote() 在页面中添加 JavaScript 代码和包含指定文本的 anchor（<a>）标记。客户单击该链接时，页面就会发出 Ajax 请求来获得新内容并替代原来的文本。
为了获得新的信息，必须为 RecipesController 添加一个 get_extra_ajax() 方法。如 所示。
清单 12. Recipes_controller.rb1
2
3
4
5
6
7
| class RecipesController < ApplicationController
...
def get_extra_ajax
@recipe = Recipe.find( params[:id] )
render :layout=>false
end
end
|
此外还需要一个模板 get_extra_ajax.rhtml 来格式化这些信息。 显示了该模板。
清单 13. Get_extra_ajax.rhtml1
2
| <blockquote><%= simple_format @recipe.ingredients %></blockquote>
<p><%= simple_format @recipe.instructions %></p>
|
现在回到页面并输入 apple，将看到 所示的结果。
图 3. 增加了可以访问配料及做法的链接 单击该链接时，浏览器使用 Ajax 从 Web 服务器检索额外的资料并显示在那个位置。结果如 所示。
图 4. 菜谱的细节 如果有一个行项或细节类型的报告，这种 Ajax 模式非常方便，因为请求每个记录的细节可能非常耗时，最好在需要的时候再请求。此外这种技术也有助于节约屏幕资源。
可能最热门的 Web 2.0 特性是自动完成文本字段。否则这趟 Ajax 之旅怎么能算完整呢？ |
|
|
|
|
|
