【知了堂学习笔记】$.ajax配合Servlet实现登录验证

一.实现登录验证的步骤

　　这次的小demo，采用的是MVC分层模式进行练习，所以我们从M->C->V开始编写代码，先完成与数据库交互的Dao层，然后再到service和servlet层，最后是界面HTMl的实现。

二.dao层的实现

　dao层的实现较简单，就是将操作数据库的SQL语句传到数据库，并返回想要的信息，这里我们要实现登录验证，就要通过用户名去查询数据了有不有这个用户，如果有就返回一个User（用户）对象，所以我们要写一个用户的实体类。

public class User {private int id;private String name;private String password;/*get、set方法*/
}

然后我们编写Dao层代码，这里我用到了接口interface，它的好处是让你的代码更有规范性，代码管理起来简单方便，易于维护，扩展性强

//接口public interface UserDao {public User findByName(String username);//通过名字查用户
  }//实现接口
public class UserDaoImpl implements UserDao {/*** 通过账户名查询账户*/@Overridepublic User findByName(String username) {// TODO Auto-generated method stubConnection conn = JDBCUtils_Oracle.getConnection();//调用获取数据库链接的方法String sql="select * from account where a_name=?";//sql语句User user = new User();try {PreparedStatement ps = conn.prepareStatement(sql);//通过ps预编译SQL语句，防止SQL注入ps.setString(1, username);//插入sql语句参数ResultSet rs = ps.executeQuery(); //获取数据库查询返回的数据if(rs.next()) {        //将查询到的数据存入User对象，如果没有返回一个空的对象，表示用户不存在user.setId(rs.getInt(1));user.setName(rs.getString(3));user.setPassword(rs.getString(4));}ps.close();conn.close(); //关闭连接} catch (SQLException e) {// TODO Auto-generated catch block
            e.printStackTrace();}return user;}
}

接下来就是service层了，照样我们这里用到了接口，这里我自定义了一个异常，如果用户名不存在或者密码错误就向上抛一个异常，servlet再捕获异常，将异常信息打印到页面，提示用户。具体代码

service代码：

//接口
public interface UserService {public void login(User user)throws PipiException;
}
//实现接口
public class UserServiceImpl implements UserService {@Overridepublic void login(User user) throws PipiException {// TODO Auto-generated method stubUserDao dao = new UserDaoImpl();//导入Dao层包String username = user.getName();User loginUser = new User();loginUser = dao.findByName(username);//将Dao层返回的对象存入loginUserif(loginUser.getName()==null) {throw new PipiException("账户名不存在！"); //数据库返回的信息为空，说明用户名不存在
        }if(!user.getPassword().equals(loginUser.getPassword())) {throw new PipiException("密码错误！"); //用户输入的密码和查询出的用户密码不一致，抛出密码错误异常
        }}
}

自定义异常：

public class PipiException extends Exception{public PipiException(String msg) {super(msg);}
}

servlet：这里用到了servlet3.0的注解，注解的好处方便了界面与servlet交互的过程，不再使用web.xml文件配置action，可以直接使用html传值，省去了编写jsp页面。

获取到传来的方法后，我们通过反射将servlet里的方法一个一个的分出来了，更方便的去调用该使用的方法。

@WebServlet("/UserServlet")//servlet注解，
public class UserServlet extends HttpServlet {private static final long serialVersionUID = 1L;public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");String methodname = request.getParameter("method");//获取页面调用的方法try {Class clazz = Class.forName("com.pi.servlet.UserServlet");//获取到UserServlet类Method[] methods = clazz.getDeclaredMethods();//然后把类的方法一块一块的分出来for (Method method : methods) {String name = method.getName();    //遍历类的方法，如果和传入的方法名相同就调用此方法if (name.equals(methodname)) {method.invoke(clazz.newInstance(), request, response);break;}}} catch (ClassNotFoundException | IllegalAccessException | IllegalArgumentException | InvocationTargetException | InstantiationException e) {// TODO Auto-generated catch block
            e.printStackTrace();}}protected void doLogin(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("charset=utf-8");PrintWriter out = response.getWriter();    //获取writer方法，用于将数据返回给ajaxUserService us = new UserServiceImpl();//调用serviceString logname = request.getParameter("logname");//获取输入的用户名String logpass = request.getParameter("logpass");//获取输入的密码User user = new User();user.setName(logname);user.setPassword(logpass);try {us.login(user);request.getSession().setAttribute("username", user.getName());//登录成功，将用户名存入sessionout.print(true);//返回true，表示登录成功} catch (PipiException e) {// TODO Auto-generated catch blockString msg = e.getMessage();request.setAttribute("msg", msg);//返回登录错误的信息out.print(false);//返回false，表示登录失败
        }out.flush();out.close();}
}

html页面，css样式太多我这里就不贴代码了：

<head><meta charset="UTF-8"><title>登录</title><link rel="icon" type="image/x-icon" href="././images/bitbug_favicon.ico"><link rel="stylesheet" type="text/css" href="index.css"><script type="application/javascript" src="js/jquery.min.js"></script>
</head>
<body><div class="container demo-1"><div class="content"><div class="large-header"><div class="logo_box"><h3>XXX管理系统</h3><form action="#" name="f" method="post"><div class="input_outer"><span class="u_user"></span><li id="c_user" class="c_user"></li><input id="loginname" name="logname" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户"></div><div class="input_outer"><span class="us_uer"></span><input id="loginpass" name="logpass" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="请输入密码"></div><div class="mb2"><input id="logbot" type="button" class="act-but submit" style="color: #FFFFFF" value="登录"></div></form></div></div></div></div>
</body>
</html>

$.ajax部分：

　　这里我们在用户输入完用户名后，就通过ajax去查询用户名是否存在，没有就显示一个×，存在就显示绿色的勾。用户点击登录后就再通过ajax去查询密码是否匹配，成功则跳转到相应页面，具体代码：

$('#loginname').focus(function(){$('#c_user').css({"background":"none"});});$('#loginname').blur(function(){//获取用户名框失去焦点事件，输入完就查询用户名是否存在if ($("[name='logname']").val() == "") {$("[name='logname']").focus();//如果用户不输入用户名，就一直停留在这里return;}$.ajax({url:"UserServlet?method=findAccount",//传入的servlet和对应的方法type:"post",//提交方式dataType:"json",//提交的数据为json串data:{"logname":$('#loginname').val()},//传入的数据为输入的登录名
                beforeSend:function(){$('#c_user').css({"background":"url(images/load.png)","background-size":"25px","animation-name":"go","animation-duration":"2s","animation-iteration-count":"infinite"});},//在没有得到servlet响应之前，加载的小图标一直转呀转
                success:function(data){//得到servlet传回的数据后，进行处理if(data==false){//false表示用户不存在$('#c_user').css({"background":"url(images/error.png)","background-size":"25px","animation-name":"none"});}else{//表示用户名存在$('#c_user').css({"background":"url(images/noerror.png)","background-size":"25px","animation-name":"none"});}},});});$('#logbot').click(function(){//点击登录按钮事件，执行登录验证if ($("[name='logname']").val() == "") {$("[name='logname']").focus();return;}if ($("[name='logpass']").val() == "") {$("[name='logpass']").focus();return;}$.ajax({url:"UserServlet?method=doLogin",type:"post",dataType:"json",data:{"logname":$('#loginname').val(),"logpass":$('#loginpass').val()},//数据为登录名和登录密码
                beforeSend:function(){$('#logbot').val("登录中");},success:function(data){//处理返回的信息，true则跳转，false则提示密码错误if(data==false){$("[name='logpass']").val("");$("[name='logpass']").attr('placeholder',"密码错误");$('#logbot').val("登录");}else{window.location.href = 'html/defaul/defaul.jsp';}},});});

这次的demo分析就完了，简单实用的登录验证就实现了，贴一下大致的界面图

最后欢迎大家来到知了堂社区一起学习成长——传送门：http://www.zhiliaotang.com

转载于:https://www.cnblogs.com/paopaolong/p/7441550.html