注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之云的足迹

点击这里添加博客描述

 
 
 

日志

 
 

Rails中Ajax刷新参数获取  

2010-08-13 15:22:00|  分类: Rails |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、在rails中使用了form_for提交表单,form中又使用了link_to_remote方法,提交Ajax请求,这时候在link_to_remote方法中需要加入:with => 'Form.serialize("test-form")',这样子才能获取到当前form中的参数,test-form为当前form的ID。


2form_remote_tag(options = {})

我们经常需要用Ajax技术来获取用户与表单间交互的结果,接着会把它post到服务器上,再将返回的结果呈现在页面。设想一个在blog上发表评论的场景,输入你的Email以及评论内容,然后点击提交,这时你评论就神奇般地添加到最后。要实现这种效果,必须通过一些JavaScript将表单上的元素序列化成一个能够通过XMLHttpRequest传递的参数。

要在Rails中创建一个支持Ajax的表单,得使用form_remote_tag()来替换form_tag()调用。用它创建表单,将会把onsubmit事件改成调用一个自定义的JavaScript函数。该函数将使用PrototypeAjax.Request(Ajax.Updater)来实现向服务器发送表单字段。除了初始化的文本参数之外,其它参数都与link_to_remote一样,同样可以包括表单中不可见元素。

例如:

<%= form_remote_tag :url => {:controller => ‘my_controller’,

:action => ‘my_action’} , :update => ‘my_element’ %>

这个Helper方法还将自动使用Prototype中的Form.serialize方法,它用来将表单上的所有输入框元素的值收集到某个字符格式的哈希表中,该哈希表将做为参数值传给该请求。

3observe_field(field_id, options = {}) 字段观察者。监听由field_id指定的DOM ID字段,并且在字段内容被修改时生成一个Ajax调用。

也就是说,它可以监控某个字段的变化(采用周期性监控或使用基于事件触发的方式),并将该变化发送到服务器端。周期性轮询是指每隔n秒钟就对目标字段取值一次,然后将值发送到服务器(不管在这个间隔时间内该值是否发生变化)。而基于事件的轮询则是使用onblur事件,即仅当用户使焦点离开目标字段时才发送变化值。照此说,周期性轮询对于类似字段自动填充的应用而言是十分有用的,它将根据字段的内容显示出一个可选列表。而基于事件的轮询则对于希望用户在字段中输入完整值后触发一个往返于服务端和客户端之间的交互的应用很有效。

下面两个选项必须被指定一个:

1:url 当字段被更改时调用的动作,它使用url_for格式。

2:function 你可以指定一个被调用的JS函数来代替前面的:url选项。

额外的选项是:

1:frequency 侦测可被更改字段的频率(以秒为单位)。如果没有设置值或设置的 值小于等于零,则使用基于事件的观察来代替基于时间的观察。

2:update 指定需要用XMLHttpReuqest响应的文本来更新的DOM ID 的元素的innerHTML

3:with XMLHttpRequest指定参数的一个JavaScript表达式。

4:on 指定哪个事件处理程序被监听。缺省地,用于有"changed"事件处理程序的text字段,文本区域和有"click"事件处理程序的单选按钮及检查框。你可以用它来替 "blur""focus"或任何其它事件。

另外,你也可以指定link_to_remote内的任何选项。

例如:

<%= text_field ‘my_object’, ‘my_property’ %>

<%= observe_field ‘my_object_my_property’,

:url => { :controller => ‘my_controller’, :action => ‘my_action’},

:update => ‘display_target’,

:frequency => 0.5,

:with => “’my_param = ‘ + value” %>

默认情况下,observer把字段值作为原始的post数据发送给服务器。可在控制器内使用reuqest.raw_postrequest.query_string来访问这个数据。不过,经常会需要把这些值标记为特定的已命名参数。Rails针对这些observer对象提供了一个可选的参数 :with。你可以通过一小段JavaScript代码来为请求生成参数列表。

4observe_form(form_id, options = {}) 如果页面要监控的是整个表单,而非单一的字段,就要使用这个方法。使用时需将指定表单id而非字段id,这样就可监控表单中所有输入框。和字段观察者一样,表单观察者也分为周期性的和基于事件的两种。它将使用Prototype提供的Form.serialize方法来获取表单的所有值,也可像字段观察者一样通过可选的:with参数来构造请求的参数。

5periodically_call_remote(options = {}) 每隔options[:frequency]秒数(缺省值是10)就调用指定的url(options[:url)一次。通常,用于用远程调用的结果更新指定的div(options[:update]):url和定义的回调函数与link_to_remote一样。

6evaluate_remote_response() 返回 ‘eval(request.responseText)’ ,它是个能在form_remote_tag:complete内调用的JavaScript函数,以计算使用update_element_function调用返回文档的多个更新。

7remote_function(options) 为一个远程函数返回需要的JavaScript。接受与link_to_remote一样的参数。

例如:

<select id="options" onchange="<%= remote_function(:update => "options",

:url => { :action => :update_options }) %>">

<option value="0">Hello</option>

<option value="1">World</option>

</select>

8submit_to_remote(name, value, options = {}) 返回一个按钮input标记,它在后台使用XMLHttpRequest提供表单而不是通常的POSTOptions参数与form_remote_tag是一样的。

  评论这张
 
阅读(1550)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018