Rails中使用jquery
环境：ruby 1.8.7 rails 2.2.2 数据库 sqlite
在rails中使用jquery来进行简单的数据校验练习：注册用户名，动态的查看用户名是否可用
1.将jquery.js引入到rails工程中，直接将 jquery.js copy到public/javascripy目录下即可
2.创建一个控制器test/testverify
def testverify
respond_to do |format|
format.html
end
end
3.创建对应的视图文件,testverify.html.erb,
在视图中引入jquery,以及我们自定义的js文件-testverify.js,
<%= javascript_include_tag "jquery", "testverify" %>，
同时这个练习中还需要使用css控制，还需要将自定义的testverify.css引入到视图中，
<%= stylesheet_link_tag 'testverify', :media => 'all' %>，
在public/stylesheet目录下创建testverify.css
最后需要一个输入用户名的文本框，和一个[校验]用户名是否合法的按钮
视图就算完成了！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<title>Pragprog Book Online Store</title>
<%= javascript_include_tag "jquery", "testverify" %>
<%= stylesheet_link_tag 'testverify', :media => 'all' %>
</head>
<body>
<h1>Test Jquery Verify</h1>
请输入名称：
<input type="text" id="userName" class="userText"> <input type="button" value="校验" id="verifyButton"/>
<div id="result"></div>
</body>
</html>
4.加上简单的css控制，默认用户名的文本框是没有值的，将其边框设置为红色
.userText {
border: 1px solid red;
}
5.接下来就是重点的部分了，如何实现动态校验用户名是否合法
1)当点击[校验]的时候,获取本文框的数据
2)发送给服务器进行校验
3)接收服务器返回的校验结果，动态的填充到视图页面
文本框的控制：当鼠标离开文本框时
1)文本框中无数据时，边框显示为红色
2)当文本框中有数据的时候，去掉边框显示为红色
/**
* ready方法在页面加载时完成对函数的注册
*/
$(document).ready(function() {
var userNameNode = $("#userName");
$("#verifyButton").click(function() {
//获取文本框的数据
var userName = userNameNode.val();
//发送给服务器
if (userName == "") {
alert("用户名不能为空!")
} else {
//接收服务器的数据，填充的div标签中
$.get("http://localhost:3000/test/verify?userName=" + encodeURI(userName), null, function(response) {
$("#result").html(response);
});
}
});
$("#userName").keyup(function() {
var value = $(this).val();
if (value == "") {
$(this).addClass("userText");
} else {
$(this).removeClass("userText");
}
});
});
6.点击校验按钮后，会把文本框中的数据发送给服务器，test/verify?userName=用户名, 所以还需要写一个校验用户名 的action--verify, 这里简单的判断如果用户名不为123就认为该用户名可以注册，（实际应用中可能需要去数据库中查 找），最后将验证结果返回
def verify
username = params[:userName]
info = username == "123" ? "用户名[" + username + "]已经存在，请使用别的用户名注册" : "可以使用用户名[" + username + "]注册"
render :text => info
end
7.jquery就会接收到服务器返回的校验信息，利用回调函数将数据动态的填充到视图中
$("#result").html(response)，将服务器返回的信息填充到id属性为result的<div>标签中
整个练习就搞定了~
注意：
1.render :text => info 返回文本信息
2.encodeURI(userName),防止出现中文乱码