ajax实现简单注册验证

Ajax的局部刷新对于提升用户体验性的确挺给力的，这里用一个日常开发中常见的注册场景来说明ajax的使用：当输入用户名之后及时给出用户名是否已存在的提示。

因为原生的ajax需要手动编码进行浏览器兼容性的处理，比较繁琐，所以更好的选择是用jQuery的ajax进行操作，jQuery做了高度封装，作为程序员来讲不用再考虑浏览器差异，可以把主要精力放在业务逻辑处理上。

不多说，在eclipse中新建一个web工程，在webroot下新建一个文件夹，导入jQuery的脚本文件。

页面jQuery代码：

<scripttype="text/javascript"src="jquery/jquery-1.8.3.js"></script>

script"text/javascript">

$(function(){

$("#username").blur(function(){

varusername=$("#username").val();

if(username.length<1){

$("#msg").html("用户名不能为空");

return;//不触发ajax

}

$.post("/ajaxWAR/register",{"uname":username},function(data){

$("<fontsize='5'style='color:red'>"+data+"</font>");

});

});

});

</script>

代码解释：用户在表单中输入用户名之后，当用户名失去焦点，则会触发ajax去后台验证该用户名在数据库中是否已经存在，验证的结果会及时通过回调函数响应在页面元素spanid="msg">上，做到数据的局部刷新。

Form表单：

formaction="#none"method="post">

用户名:input"text"name="username""username"/>span>br>

密码:"password""password""submit""log"value="登陆"/>

"reg""注册""reset""重置"form后台servlet：

@WebServlet("/register")

publicclassregisterServletextendsHttpServlet{

@Override

protectedvoidservice(HttpServletRequestrequest,

HttpServletResponseresponse)throwsservletexception,IOException{

response.setContentType("text/html;charset=utf-8");

Stringuname=request.getParameter("uname");

UserDAOuserDAO=newUserDAOImpl();

Useruser=userDAO.findByName(uname);

PrintWriterpw=response.getWriter();

if(user==null){

pw.print("恭喜你，该用户名可以注册!!!");

}else{

pw.print(对不起，该用户名已存在!!!");

}

}

}

可以看到，该servlet的主要工作就是调用dao去进行数据库查询，并把验证结果通过打印流发送回前端页面。

Dao代码：

publicUserfindByName(Stringname){

Connectionconnection=DBUtil.getConnection();

PreparedStatementpstm=null;

ResultSetrs=null;

Useruser=null;

Stringsql="select*fromuserwhereusername=?";

try{

pstm=connection.prepareStatement(sql);//

pstm.setString(1,name);//设置参数

rs=pstm.executeQuery();执行查询

遍历结果集

while(rs.next()){

user=newUser();

Stringusername=rs.getString("name");

intid=rs.getInt("id");

Stringpassword=rs.getString("password");

user.setName(username);

user.setId(id);

user.setPassword(password);

}

}catch(sqlExceptione){

e.printstacktrace();

}finally{

DBUtil.close(rs,pstm,connection);关闭资源

}

returnuser;

}

测试截图：

图1用户表已存在记录

图2输入用户表中不存在的记录

图3输入用户表中已存在记录

至此，一个最简单的ajax局部刷新小实例就完成了。可以看到，从后台返回的用户名验证信息只是刷新到页面中的一个元素中，并没有刷新整个页面，浏览器地址栏的地址一直没变。