前面我们算是基本完成了用户注册这个功能，但是也是仅仅实现了这个功能，在实际应用中我们不能这么做，而且用户也不会接受我们这样做。我们要做的还有很多。比如，用户注册的时候填写用户名的时候我们得先验证这个用户名是否被别人用了，若已经有人用了，那我们就不能再使用这个名字，为了友好的交互，我们便需要用ajax来验证。
- 注册<br/>
- <form action="user?action=register" method="post">
- 用户名<input type="text" name="username" id="name" ><span id="namespan"> </span><br/>
- 密码<input type="password" name="passwd" id="password1"> <span id="password1span"></span> <br/>
- 确认密码<input type="password" name="passwd2" id="password2"> <span id="password2span"></span> <br/>
- 邮箱<input type="text" name="email" id="mail"><span id="em"> </span> <br/>
- <input type="submit" id="submit" value="注册"/>
- </form>
我在这里只是为了实现功能，并没有对表单进行美化。
实现的原理是当鼠标焦点离开“用户名”这个输入框时，实现局部刷新。将所填的“用户名”提交到后台，以用户名为条件查找用户，将用户是否存在的结果返回到前台，提示相应的信息。
先从底层看起：
1.首先实现以用户名为属性查找用户的方法，在UserTableDao方法添加这样的方法
2.在service层内编写接口、实现接口
编写接口：
实现接口：
3.Servlet实现控制
在这里专门编写一个实现Ajax验证的类AjaxServlet
4.Jquery实现ajax验证
- $(document).ready(function(){
- $("#name").focus(function(){
- $("#namespan").html("用户名应在3-12位之间");
- }).blur(function(){
- var username = $("#name").val(); //获取在相应输入框内输入的内容
-
- $.ajax({
- async: false, //默认为true，即请求为异步请求
- timeout:5000, //设置请求超时时间（毫秒）
- dataType:"json", //返回的数据类型
- type: "post", //设置请求方式
- url: "test", //设置请求URL
- data: "word=name&username="+username, //设置传递的参数值
- success:function(msg){ //设置响应成功之后执行的回调函数
- if(username.length >= 3 && username.length <=12 && username!=''){
- /* $("#namespan").html(""); */
- if(msg.existName==true){
- $("#namespan").html("<b>名称可用</b>");
- }else{
- $("#namespan").html("<b>名称已被使用，换一个</b>");
- }
- }else{
- $("#namespan").html("<b>用户名应在3-12位之间</b>");
- }
- },
- error:function(){ //设置响应失败之后执行的回调函数
- alert("访问失败");
- }
- });
- });
- });
到这里ajax验证的基本功能就结束了，把它好好美化一番就完美了。
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/29876573/viewspace-1838531/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/29876573/viewspace-1838531/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
