您的位置：首页 > Web前端 > JavaScript

JavaScriptHelper之 form_ remote_tag

2010-01-12 22:29 274 查看
       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
行：定义了列表更新区域，响应结果会显示在该处
。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax xmlhttprequest asynchronous javascript include parameters
相关文章推荐
新的分享
章节导航