Rails中运用jquery

2012-12-26

Rails中使用jquery环境：ruby 1.8.7 rails 2.2.2 数据库 sqlite?在rails中使用jquery来进行简单的数据校验

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" 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),防止出现中文乱码

热点排行

网络基础

Rails中运用jquery