form_remote_tag 标签用于实现表单中的 Ajax 操作。
如果想使现有的表单支持 Ajax 操作,只需要将 form_tag 标签更换为 form_remote_tag 标签即可。
使用 form_remote_tag 标签后,表单中所有的数据项都会被自动序列化。在向服务器发送表单请求处理时, form_remote_tag 相关的方法
会自动使用 XMLHttpRequest 发送数据
下面的实例演示了如何通过表单向列表中添加列表项。
R 1 :创建 controller 控制器类 FormAjaxTagController ,以及相应的模板 index.rhtml
controller 控制器类 FormAjaxTagController 对应的文件为 form_ajax_tag_ controller.rb ,位于 app/controllers 目录下。
index.rhtml 文件位于 app/views/form_ajax_tag 目录下。
#可以使用命令 ruby script/generate controller form_ajax_tag index 完成创建。
R2 :编辑 controller 控制器类
编辑 form_ajax_tag_controller.rb 文件,编辑完成后的代码如下。
1 class FormAjaxTagController < ApplicationController
2 def index
3 end
4
5 def add_item
6 render(:text => "您输入的内容是: " + "<li>" + params[:newitem] + "</li>")
7 end
8 end
第 2~3 行:隐式调用模板文件。
第 5~7 行:输出当前列表项。
R 3 :编辑 index.rhtml 文件
1 <html>
2 <head>
3 <title> 添加新的列表项 </title>
4 <%= javascript_include_tag "prototype" %>
5 </head>
6 <body>
7 <h3> 测试列表 </h3>
8 <% form_remote_tag (:update => "my_list ",
9 :url => { :action => :add_item },
10 :position => "top" ) do %>
11 新列表项:
12 <%= text_field_tag :newitem %>
13 <%= submit_tag " 添加新的列表项 " %>
14 <% end %>
15 <ul id="my_list ">
16 </ul>
17 </body>
18 </html>
第 4 行:使用 javascript_include_tag 标签来包含 prototype.js 文件 。
第 8 行:使用 form_remote_tag 标签创建基于 Ajax 操作的表单应用。 :update 参数项用于指定更新区域的 id 值,以显示响应结果 ;
:url 参数项指定了所要请求的行为方法 ; :position 参数项指定了结果的显示方式 ,值 top 表示新添加的列表项将显示在当前列表项的上面。本行代码所生成的 HTML 代码如下。
<form action="/form_ajax_tag/add_item" method="post" onsubmit="new Ajax.Updater ('my_list', '/form_ajax_tag/add_item', {asynchronous:true, evalScripts:true, insertion:Insertion.Top, parameters:Form.serialize (this)}); return false;">
第 12 行:定义文本框 。
第 13 行:定义按钮 。
第 14 行:表单结束标记 。
第 15~16 行:定义了列表更新区域,响应结果会显示在该处 。