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局部刷新小实例就完成了。可以看到,从后台返回的用户名验证信息只是刷新到页面中的一个元素中,并没有刷新整个页面,浏览器地址栏的地址一直没变。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |