R1. 创建ROR工程
具体生成步骤略
R2. 创建 controller 控制器类 LinkAjaxTagController ,以及相应的模板 index.rhtml 和 ajax_content.rhtml
controller 控制器类 LinkAjaxTagController 对应的文件为 link_ajax_tag_ controller.rb ,位于 app/controllers 目录下 。
index.rhtml 文件和 ajax_content.rhtml 位于 app/views/link_ajax_tag 目录下。
R 3 . 编辑 controller 控制器类
1 class LinkAjaxTagController < ApplicationController
2 before_filter :set_charset
3
4 def set_charset
5 @headers["Content-Type"] = "text/html; charset=GB2312"
6 end
7
8 def index
9 render(:template => "link_ajax_tag/index")
10 end
11
12 def get_page
13 render(:partial => "link_ajax_tag/ajax_content")
14 end
15 end
第 2~6 行 :此处为过滤器 , 用来设定输出模板文件的字符集, 此例设置为 GB2312 。
第 8~10 行 :指定模板文件。这段代码显式指定了模板文件,本处也可以不显式指定,而由 RoR 自动查找。
第 12~14 行 :获得局部模板 ajax_content.rhtml 文件。
Example:
# Generates: <a href="#" onclick="new Ajax.Updater('posts', '/blog/destroy/3', {asynchronous:true, evalScripts:true});
# return false;">Delete this post</a>
link_to_remote "Delete this post", :update => "posts",
:url => { :action => "destroy", :id => post.id }
# Generates: <a href="#" onclick="new Ajax.Updater('emails', '/mail/list_emails', {asynchronous:true, evalScripts:true});
# return false;"><img alt="Refresh" src="/images/refresh.png?" /></a>
link_to_remote(image_tag("refresh"), :update => "emails",
:url => { :action => "list_emails" })# 此处)不能换行
You can override the generated HTML options by specifying a hash in options[:html] .
link_to_remote "Delete this post", :update => "posts", :url => post_url(@post), :method => :delete,
:html => { :class => "destructive" }
# Generates: <a href="#" onclick="new Ajax.Updater({success:'posts',failure:'error'}, '/blog/destroy/5',
# {asynchronous:true, evalScripts:true}); return false;">Delete this post</a>
link_to_remote "Delete this post",
:url => { :action => "destroy", :id => post.id },
:update => { :success => "posts", :failure => "error" }
R4 . 编辑 ajax_content.rhtml 文件
1 <h1><%= Time.now %></h1>
第 1 行:获得当前时间 (精确到秒)。
R5 . 编辑 index.rhtml 文件
1 <html>
2 <head>
3 <title>link_to_remote 测试 </title>
4 <%= javascript_include_tag "prototype" %>
5 </head>
6 <body>
7 <p>
8 <%= link_to_remote (" 获得页面(不重复) ",
9 :update => "page_space_1 ", <!--此处对应下面的div -->
10 :url => {:action => :get_page }) %>
11 <div id="page_space_1 "></div>
12 </p>
13 <p>
14 <%= link_to_remote (" 获得页面(重复) ",
15 :update => "page_space_2 ",
16 :url => {:action => :get_page },
17 :position => "after") %>
18 <div id="page_space_2 "></div>
19 </p>
20 </body>
21 </html>
第 4 行 :使用 javascript_include_tag 标签来包含 prototype.js 文件。
第 8~10 行 :使用 link_to_remote 标签生成支持 Ajax 功能 的链接。 :update 参数项用于关联更新区域的 id 值 (本例关联了第 11 行代码所定义的更新区域); :url 参数项指定了所要请求的行为方法 。本段代码所生成的 HTML 代码如下。
<a href="#" onclick="new Ajax.Updater('page_space_1', '/link_ajax_ tag/get_page', {asynchronous:true, evalScripts:true}); return false;"> 获得页面(不重复) </a>
第 14~17 行 :使用 link_to_remote 标签生成支持 Ajax 功能的链接。其中 :update 参数项指定的更新区域为第 18 行代码所定义的更新区域; :position 参数项用于设定结果的显示位置,未设定时,默认在同一位置上显示,即后一次操作的结果会覆盖前一次操作的结果。第 17 行代码的含义是在当前显示位置(第 18 行代码所定义的位置)之后加入新的响应结果。本段代码所生成的 HTML 代码如下。
<a href="#" onclick="new Ajax.Updater('page_space_2', '/link_ajax_ tag/get_page', {asynchronous:true, evalScripts:true, insertion: Insertion.After}); return false;"> 获得页面(重复) </a>
R6 . 测试
启动 WEBrick 服务器,在 IE 地址栏中输入 http://127.0.0.1:3000/link_ajax_tag