考虑如下需求:
1. 用户输入一个用户名,当焦点跳出文本框时,检查该用户名是否有效
2. 动态更新检查的结果
我们使用ajax的方式来实现这个简单的功能,首先建立view:check.html.erb:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "rails" %>
<%= stylesheet_link_tag 'user' %>
<h1>check user name</h1>
<script>
var xml_http = null;
function set_xml_http()
{
if(!xml_http && typeof XMLHttpRequest != "undefined")
xml_http = new XMLHttpRequest();
}
function start_request()
{
//var name = $("#name").value;
var name = document.getElementById("name").value;
if(name != "")
{
set_xml_http();
var url = "/users/check_name?username="+name;
xml_http.open("GET",url,true);
xml_http.onreadystatechange = request_handle;
xml_http.send(null);
}
else
document.getElementById("info").innerHTML = "你还没有输入name哦!"
}
function request_handle()
{
if(xml_http.readyState < 4)
info.innerHTML = "正在检查name是否合法..."
else if(xml_http.readyState == 4)
{
if(xml_http.status == 200)
info.innerHTML = xml_http.responseText;
}
else
alert("错误:请求页面异常!")
}
</script>
<%= text_field_tag("name","",onchange:"start_request()")%>
<span id="info"></span>
不知道上述代码为毛不能使用jQuery!?暂且放一边吧...接着我们来写服务器对应的check_name方法:
def mk_color(color,txt)
"<span class=#{color}>#{txt}</span>"
end
def check_name
name = params[:username]
if name.size <= 6
render text:mk_color("red","#{name} 长度必须大于6个字节")
elsif name =~ /fk|fuck|shit/
render text:mk_color("red","#{name} 不能包含不和谐单词")
else
render text:mk_color("green","#{name} 可以使用")
end
end
如果name有效则返回绿色文字,否则返回红色文字;这个可以通过css来实现,对应的css如下:
.red {
color:red
}
.green {
color:green
}
别忘了还要加路由啊:
get 'users/check' => 'users#check'
get 'users/check_name' => 'users#check_name'
代码流大致如下:首先用户访问localhost:3000/users/check页面,然后输入用户名,当焦点离开文本框时,调用start_request方法;该方法首先建立一个xml_html对象(不考虑浏览器为ie情况,否则还得加一坨代码),该方法在safari和firefox测试有效。接着通过xml_html向check_name Action发送请求,随后注册一个回调函数request_handle;当请求返回时就会执行回调函数,该函数将结果实时动态的插入info对象。