2007-10-22

Rails之Ajax---remote-function

关键字: rails ruby ajax
Ruby on Rails宣称自己对web2.0技术的支持是很彻底的，其中对于ajax的使用，更是声称是业界领先的，下面就对其中的一些功能进行学习和实践。

在web的一个很普通的应用里面，有一个需要使用到ajax来提升用户体验的方法，比如，在用户注册的时候，当用户填写登录名称时，系统可以自动判定用户填写的注册名是否已经被使用，我们可以通过下面的方法来实现。

首先是rhtml 
<%= form_tag %>
    <input id="user_user_name" name="user[user_name]" 
        size="40" onblur="if(this.value!=''){
        <%= remote_function(:update=>'result', :url=>{:action=>:isok},:with=>"{user_name:Field.getValue('user_user_name')}")%>;}"></input>
        
        <div id="result"></div>
        
        <br><%= submit_tag("submit")%>
<%= end_form_tag%>


这里应该注意的是，在rhtml中添加ruby对ajax的支持
<%= javascript_include_tag "prototype" %>


刷新浏览器，看看生成的源代码：
<form action="/ajax" method="post">
    <input id="user_user_name" name="user[user_name]" 
        size="40" onblur="if(this.value!=''){
        new Ajax.Updater('result', '/ajax/isok', {asynchronous:true, evalScripts:true, parameters:{user_name:Field.getValue('user_user_name')}});}"></input>
        
        <div id="result"></div>
        
        <br><input name="commit" type="submit" value="submit" />
</form>


我们可以看到，通过remote_function的使用，html应用了 property中的new ajax方法，第一个参数是更新的区域(div)，第二个参数是调用的action，这里需要重点记录一下第三个参数的写法，正是通过这个参数，才将用户在页面上填写的用户名传输到后台，这样就可以针对用户名是否存在进行校验了。

rhtml中是通过:with参数才实现的，这个参数是remote_function中option中的一个，是用来生成html中的parameters的，可以看到，冒号的前面是要传递的参数名，而后面则是页面上用户输入的值，Field.getValue('user_user_name')通过这个方法，可以取到form中id为user_user_name的input的值。

下面看一下controller： 
def isok
    user_name=params[:user_name]
    render_text user_name
  end

代码很简单，通过参数取到用户输入的值，就可以进行相应的处理了。
评论
发表评论

您还没有登录，请登录后发表评论

yezi
搜索本博客
我的相册
76988825-a3a2-35e4-b837-75437d40ffca-thumb
IMG_7195
共 46 张
最近加入圈子
存档
最新评论