ajax-登陆+验证码（转载）

Posted 2020-10-13 佬鬼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax-登陆+验证码（转载）相关的知识，希望对你有一定的参考价值。

登陆用户名和密码判断+验证码验证

省略dao层和service层

1、生成验证码的number.jsp

<%@ page contentType="image/jpeg" language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>  
  
<%!  
    Color getRandColor(int fc,int bc){  
        Random random = new Random();  
        if(fc > 255){  
            fc = 255;  
        }  
        if(bc < 255){  
            bc = 255;  
        }  
        int r = fc +random.nextInt(bc-fc);  
        int g = fc +random.nextInt(bc-fc);  
        int b = fc +random.nextInt(bc-fc);  
          
          
        return new Color(r,g,b);  
    }  
%>  
  
<%   
    //设置页面不缓存  
    response.setHeader("Pragma","no-cache");  
    response.setHeader("Cache-Control","no-catch");  
    response.setDateHeader("Expires",0);  
      
    //在内存中创建图象  
    int width = 60;  
    int height = 20;  
    BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);  
      
    //创建图象  
    Graphics g = image.getGraphics();  
    //生成随机对象  
    Random random = new Random();  
    //设置背景色  
    g.setColor(getRandColor(200,250));  
    g.fillRect(0,0,width,height);  
    //设置字体  
    g.setFont(new Font("Tines Nev Roman",Font.PLAIN,18));  
    //随机产生干扰线  
    g.setColor(getRandColor(160,200));  
    for(int i = 0; i < 255; i++){  
        int x = random.nextInt(width);  
        int y = random.nextInt(height);  
        int xl = random.nextInt(12);  
        int yl = random.nextInt(12);  
    }  
    //随机产生认证码,4位数字  
    String sRand = "";  
    for(int i = 0; i < 4; i++){  
        String rand = String.valueOf(random.nextInt(10));  
        sRand  += rand;  
        //将认证码显示到图象中  
        g.setColor(new Color(20 + random.nextInt(110),20 + random.nextInt(110),20 + random.nextInt(110)));  
        g.drawString(rand,13*i+6,16);  
    }  
    session.setAttribute("rCode",sRand);  
    //图像生效  
    g.dispose();  
    //输出图像到页面  
    ImageIO.write(image,"JPEG",response.getOutputStream());  
    out.clear();  
    out = pageContext.pushBody();  
%>

session.setAttribute("rCode",sRand); 这是把生成的验证码放入Session中。便于验证时候获取
2、checkLoginServlet.java

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String code =request.getParameter("ucode");
        UserService userService=new UserServiceImpl();
        String rCode =(String) request.getSession().getAttribute("rCode");
        System.out.println("username=============="+username);
        //用户名是否存在
        if(!userService.checkUsername(username)){
            out.write("unregistered");
        }else if(!code.equals(rCode)){
            out.write("codeerror");
        }else if(!userService.checkIsAdmin(username)){
            out.write("noadmin");
        }else {
        
            //用户名是否被锁
            if(!userService.checkUsernameStatus(username)){
                out.write("forzen");    
            }
            
            //用户名和密码是否正确
            if(!userService.checkLogin(username, password)){
                out.write("fail");
            }else{
                out.write("success");
            }
            
            
        }
        
        
        //判断用户名是否存在，不存在，存在后再判断p
        
    }

3、jsp页面 login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>登录</title>  
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/pintuer.js"></script>  
    
   <script type="text/javascript">
    $(document).ready(function(){
        
        $("#btnLogin").click(function(){
            var username = $("#username").val();
            var password = $("#password").val();
            var ucode = $("#code").val();
            if(username =="" || password==""){
                alert("用户名和密码不能为空");
            }else{
                $.ajax({
                    type:"POST",
                    url:"<%=request.getContextPath()%>/CheckLoginServlet",
                    data:{
                        "username":username,
                        "password":password,
                        "ucode":ucode
                    },
                    contentType:"application/x-www-form-urlencoded",
                    success:function(msg){
                        if(msg=="unregistered"){
                            alert("对不起，该用户未注册");
                        }
                        if(msg=="forzen"){
                            alert("对不起，该用户已被锁");
                        }
                        if(msg="noadmin"){
                            alert("对不起，你没有管理员权限");
                        }
                        if(msg=="fail"){
                            alert("对不起，密码错误");
                        }
                        if(msg =="codeerror"){
                            alert("验证码错误");
                        }
                        
                        if(msg=="success"){
                            parent.document.location.href="<%=request.getContextPath()%>/admin/index.jsp";
                        }
                            
                    },
                
                });
            
            }
            return false;
            
            
        });
    
    });

</script>
</head>
<body>
 
<div class="bg"></div>
<div class="container">
    <div class="line bouncein">
        <div class="xs6 xm4 xs3-move xm4-move">
            <div style="height:150px;"></div>
            <div class="media media-y margin-big-bottom">           
            </div>         
            <form id="form1">
            <div class="panel loginbox">
                <div class="text-center margin-big padding-big-top"><h1>后台管理中心</h1></div>
                <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                    <div class="form-group">
                        <div class="field field-icon-right">
                            <input id="username" type="text" class="input input-big" name="name" placeholder="登录账号" data-validate="required:请填写账号" />
                            <span class="icon icon-user margin-small"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="field field-icon-right">
                            <input type="password" id="password" class="input input-big" name="password" placeholder="登录密码" data-validate="required:请填写密码" />
                            <span class="icon icon-key margin-small"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="field">
                            <input type="text" class="input input-big" id="code" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
                           <img src="number.jsp" id="safeCode"/><a id="changeCode" href="#">看不清，换一张</a> 
                                                   
                        </div>
                    </div>
                </div>
                <div style="padding:30px;"><input type="submit" id="btnLogin" class="button button-block bg-main text-big input-big" value="登录"></div>
            </div>
            </form>          
        </div>
    </div>
</div>

</body>
</html>

比较简单的4位数字图片验证码。

以上是关于ajax-登陆+验证码（转载）的主要内容，如果未能解决你的问题，请参考以下文章

java 登陆时的验证码怎么做？

[转载]python实现带验证码网站的自动登陆

DAY87-BBS项目数据库设计与简单登陆验证码

IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典案例

登陆界面代码

BBS-登陆认证