前面我们算是基本完成了用户注册这个功能，但是也是仅仅实现了这个功能，在实际应用中我们不能这么做，而且用户也不会接受我们这样做。我们要做的还有很多。比如，用户注册的时候填写用户名的时候我们得先验证这个用户名是否被别人用了，若已经有人用了，那我们就不能再使用这个名字，为了友好的交互，我们便需要用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("访问失败");
-
}
-
});
-
});
- });
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29876573/viewspace-1838531/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
从用户管理系统中复习javaweb知识8
请登录后发表评论
登录
全部评论
