JavaScriptHelper之 form_ remote_tag

       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 行:定义了列表更新区域,响应结果会显示在该处

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


你可能感兴趣的:(JavaScript,Ajax,XMLhttpREquest,Parameters,include,asynchronous)