ajax|rails六、 使用form_remote_tag
这个form_remote_tag()帮助函数与link_to_remote()很相似,除了它也发送一个HTML表单的内容之外。这意味着该行动处理器可以使用用户输入的数据来形成响应。这个实例显示了一个web页面-它有一个列表和一个支持Ajax的表单-该表单能够让用户添加一些选项到该列表中。
我的视图模板(index.rhtml)看上去象:
<html> <head> <title>Ajax List Demo</title> <%= javascript_include_tag "prototype" %> </head> <body> <h3>Add to list using Ajax</h3> <%= form_remote_tag(:update => "my_list", :url => { :action => :add_item }, :position => "top" ) %> New item text: <%= text_field_tag :newitem %> <%= submit_tag "Add item with Ajax" %> <%= end_form_tag %> <ul id="my_list"> <li>Original item... please add more!</li> </ul> </body> </html> |
请注意上面加粗的两部分,它们定义了表单的开始和结束。因为该表单以form_remote_tag()而不是form_tag()开始,应用程序将使用XMLHttpRequest提交这个表单。form_remote_tag()中的参数看上去是:
·更新参数用于指定DOM元素的id及行动执行结果要更新的内容-在本例中是my_list。
·url参数用于指定服务器端行动-在本例中,调用一个称为add_item的行动。
·位置参数代表插入到my_list元素顶部的返回的HTML片断-在本例中是一个<UL>标签
图4.在增加任何项前 |
我的控制器类看起来象下面这样:
class ListdemoController < ApplicationController def index end def add_item render_text "<li>" + params[:newitem] + "</li>" end end |
add_item行动处理器构建一个HTML列表项片断,它包含输入到表单的newitem字段中的任何文本。
图5.添加几个新的列表项之后 |