在我们小时候打游戏时,注册用户名常常就遇见注册个,已存在,又注册个,又已存在,而这个一般是使用ajax,实现的,之前我也发过ajax ,是w3c的学习链接,这次就实践一个,如何实现对注册时用户名的异步校验。
为什么要选择ajax呢?ajax可以实现部分页面的数据刷新,而不必刷新整个页面,给用户更好的体验。
首先我们需要在页面中加入 js代码
我们先给用户名的文本框加入id,以便于js编写代码
我们命名为username
为username文本框绑定事件,当blur失去焦点时触发js代码
<script type="text/javascript">
$(funtion()){
$("#username").blur(function(){
//获得文本框值
var va = $(this).val();
//发送数据
if(val != ""){
var url = "${ pageContext.request.contextPath}/UserServlet";
var params = {"method":"checkUsername","username":val};
$.post(url,params,function(data){
if(data == 1){
$("#s1").html("用户名可以使用").css("color"),"#0f0");//s1是用户名后面的span的id
$("#reg").attr("disabled",false);//将注册按钮调整为可用
} else if(data == 2){
$("#s1").html("用户名已被注册").css("color","#f00");
$("#reg").attr("disabled",true);//将注册按钮调整为不可用
}
});
}
});
});
</script>
后台如何写呢?
//先接收文本框的值
String username = request.getParameter("username");
//去查询并返回
...
if(用户名未存在){
response.getWriter().println(1);
}else{
response.getWriter().println(2);
}