zoukankan      html  css  js  c++  java
  • 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位数字图片验证码。

    初从文,三年不中;后习武,校场发一矢,中鼓吏,逐之出;遂学医,有所成。自撰一良方,服之,卒。
  • 相关阅读:
    BZOJ 1191 HNOI2006 超级英雄hero
    BZOJ 2442 Usaco2011 Open 修建草坪
    BZOJ 1812 IOI 2005 riv
    OJ 1159 holiday
    BZOJ 1491 NOI 2007 社交网络
    NOIP2014 D1 T3
    BZOJ 2423 HAOI 2010 最长公共子序列
    LCA模板
    NOIP 2015 D1T2信息传递
    数据结构
  • 原文地址:https://www.cnblogs.com/HongDunLaoGui/p/7780742.html
Copyright © 2011-2022 走看看