JavaScriptHelper之 link_to_remote

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


你可能感兴趣的:(JavaScriptHelper之 link_to_remote)