实现同步加载验证码和用户名是否存在的判断通过Ajax

布满荆棘的人生 2022-05-28 06:24 138阅读 0赞

1.验证码工具类

package com.syh.utils;
    
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics2D;
    import java.awt.image.BufferedImage;
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.OutputStream;
    import java.io.PrintWriter;
    import java.util.Random;
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    public class ValidateCodeServlet extends HttpServlet {
    	
    	private static final long serialVersionUID = 1L;
    
    	@Override
    	protected void service(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		createCode(request);
    		write(response.getOutputStream());
    	}
    	
        // 图片的宽度
        private int width = 160;
        // 图片的高度
        private int height = 28;
        // 要输入验证码的数量
        private int codeCount = 4;
        // 验证码上面的模糊线
        private int lineCount = 150;
        // 验证码，要和用户输入的对比
        private String code = null;
    
        private BufferedImage buffImg = null;
    
        private char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
    
    
        public void createCode(HttpServletRequest request) {
            int x = 0, fontHeight = 0, codeY = 0;
            int red = 0, green = 0, blue = 0;
    
            x = width / (codeCount + 2);
            fontHeight = height - 2;
            codeY = height - 4;
    
            buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics2D g = buffImg.createGraphics();
            Random random = new Random();
            g.setColor(Color.WHITE);
            g.fillRect(0, 0, width, height);
            Font font = new Font("Fixedsys", Font.BOLD, fontHeight);
            g.setFont(font);
            for (int i = 0; i < lineCount; i++) {
                int xs = random.nextInt(width);
                int ys = random.nextInt(height);
                int xe = xs + random.nextInt(width / 8);
                int ye = ys + random.nextInt(height / 8);
                red = random.nextInt(255);
                green = random.nextInt(255);
                blue = random.nextInt(255);
                g.setColor(new Color(red, green, blue));
                g.drawLine(xs, ys, xe, ye);
            }
    
            StringBuffer randomCode = new StringBuffer();
            for (int i = 0; i < codeCount; i++) {
                String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
                red = random.nextInt(255);
                green = random.nextInt(255);
                blue = random.nextInt(255);
                g.setColor(new Color(red, green, blue));
                g.drawString(strRand, (i + 1) * x, codeY);
                randomCode.append(strRand);
            }
    
            code = randomCode.toString();
            HttpSession session = request.getSession();
            session.setAttribute("code", code);
        }
    
        public void write(String path) throws IOException {
            OutputStream sos = new FileOutputStream(path);
            this.write(sos);
        }
    
        public void write(OutputStream sos) throws IOException {
            ImageIO.write(buffImg, "png", sos);
            sos.close();
        }
    
        public BufferedImage getBuffImg() {
            return buffImg;
        }
    
        public String getCode() {
            return code;
        }
    }

2.验证码使用

jsp代码

<form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet">
              <table>
                 <caption style="font-size:25px;">注册本系统用户</caption>
                 <tr>
                    <td><span>用户名</span></td>
                    <td><input type="text" name="username"/></td>
                 </tr>
                 <tr  class="info">
                    <td>提示信息</td>
                    <td><span></span></td>
                 </tr>
                 <tr>
                    <td><span>密   码</span></td>
                    <td><input type="password" name="password"/></td>
                 </tr>
                 <tr>
                    <td><span>重复密码</span></td>
                    <td><input type="password" name="repassword"/></td>
                 </tr>
                 
                 <tr>
                    <td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td>
                    <td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="点击刷新验证码" οnclick="getCode()" style="cursor: pointer;"/></td>
                 </tr>
                 
                 <tr id="btn">
                    <td align="center"><input  type="submit" name="sub" value="注册"/></td>
                 </tr>
              </table>
            </form>

js代码

function getCode(){
    	        $("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="
    				+ new Date().getTime());
            }

3.遇到的问题

自己输入的验证码和系统通过session对象返回的验证码老是不一致，老是出现从session中取出的值是上次刷新页面的的验证码，老是不同步，在这里我是用的Ajax来实现了同步

$.ajax({
                    cache: true,
                    type: "POST",
                    url:ajaxCallUrl,
                    async: false,
                    error: function(request) {
                        alert("Connection error");
                        evt.preventDefault();
                    },
                     success: function(data) {
                        //回调函数
                        if("验证失败" == data){
                           evt.preventDefault();
                          }
                        
                      }
                      });

4.通过Ajax访问检查验证码是否正确的Servlet代码

package com.syh.utils;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class CheckImageCodeServlet extends HttpServlet{
    
    	
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		doPost(req, resp);
    	}
    	
    	
    	@Override
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		String code = request.getParameter("code");
    		String code1 = (String) request.getSession().getAttribute("code");
    		PrintWriter writer = response.getWriter();
    		if(code1.equals(code)){
    		    writer.write("验证成功");
    		}else{
    			writer.write("验证失败");
    		}
    	}
    	
    	
    }

5.web.xml文件的配置的验证的验证码的servlet配置

<servlet>
          <servlet-name>CheckImageCodeServlet</servlet-name>
          <servlet-class>com.syh.utils.CheckImageCodeServlet</servlet-class>
      </servlet>
      <servlet-mapping>
          <servlet-name>CheckImageCodeServlet</servlet-name>
          <url-pattern>/checkImageCodeServlet</url-pattern>
      </servlet-mapping>

========================================================================

5.整个jsp页面的代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>注册用户</title>
       <style type="text/css">
            html,body{
                padding:0px;
                margin:0px;
                height:100%;
                width:100%;
            }
             #main,table{
                width:40%;
                margin:0 auto;
                background:#DBDBDB;
                height:40%;
             }
             table{
                margin-top:20%;
             }
             table tr {
                height:50px;
                line-height:50px;
             }
             #btn button,#btn input{
                margin-top:50px;
                width:80px;
                height:30px;
                background:green;
                text-align:center;
             }
             
             .info{
                color:red;
                FILTER: alpha(opacity=0);
                opacity:0;
                height:20px;
                line-height:20px;
             }
        
        </style>
    	<script type="text/javascript" src="${pageContext.request.contextPath }/file/js/jquery.js"></script>
    	<script type="text/javascript">
    	    $(document).ready(function(){
    	        $("input[name='username']").blur(function(){
    	            CheckUsername(); 
    	        } );
    	    })
    	   
    	    CheckUsername = function(){
                var username = $("input[name=username]").val();
                //alert(username);
                if($.trim(username) != ""){
                   var username1 = $.trim(username);
                   /*使用Ajax进行验证*/
                   var ajaxCallUrl = '${pageContext.request.contextPath}/checkUsernameServlet?username=' + username1;
    	           $.ajax({
                    cache: true,
                    type: "POST",
                    url:ajaxCallUrl,
                    async: false,
                    error: function(request) {
                        alert("Connection error");
                        
                    },
                    success: function(data) {
                        //验证用户名是否已经存在
                       //alert(data);
                        if("no" == data){
                           $(".info td span").html("用户名已经被占用");
                           $(".info").css("color","red");
                        }else{
                            
                           $(".info td span").html("用户名可以使用");
                           $(".info").css("color","blue");
                        }
                        $(".info").css("opacity","1");
                    }
                  });
                }else{
                   //提示用户名不能为空
                }
            }
    	   
    	   
    	   
    	   
    	
    	
    	    function getCode(){
    	        $("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="
    				+ new Date().getTime());
            }
            
            //鼠标出输入框时验证
           
            
            CheckPassord = function(){
                var password =  $("input[name=password]").val();
                var repassword =  $("input[name=repassword]").val();
                if($.trim(password) != '' && $.trim(repassword) != '' && $.trim(password) == $.trim(repassword)){
                     return 1;
                }else{
                     return  0;
                }
            }
            
            function CheckForm(form,evt){
                var flag = 0;
                //验证用户是否为空
                
                if($.trim($("input[name=username]").val()) != ""){
                   flag = 1;
                }
                
                //验证用户名
                var text = $(".info td span").html();
                alert(text);
                if(text == "用户名可以使用"){
                   flag = 1;
                }else{
                   flag = 0;
                }
                if(flag == 1){
                     //验证密码是否相同
                     flag = CheckPassord();
                     if(flag ==1){
                        //验证验证码是否正确
                     var code = $("#code").val();
                     var ajaxCallUrl = '${pageContext.request.contextPath}/checkImageCodeServlet?code=' + code;
    	             /*Ajax验证验证码*/
    	           $.ajax({
                    cache: true,
                    type: "POST",
                    url:ajaxCallUrl,
                    async: false,
                    error: function(request) {
                        alert("Connection error");
                        evt.preventDefault();
                    },
                     success: function(data) {
                        //回调函数
                        if("验证失败" == data){
                           evt.preventDefault();
                          }
                        
                      }
                      });
                   }else{
                      evt.preventDefault();
                   }
                }else{
                   evt.preventDefault();
                }
                
            }
    	</script>
      </head>
      
      <body>
          
          <h2>${error}</h2>
          <div id = "main">
            
            <form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet">
              <table>
                 <caption style="font-size:25px;">注册本系统用户</caption>
                 <tr>
                    <td><span>用户名</span></td>
                    <td><input type="text" name="username"/></td>
                 </tr>
                 <tr  class="info">
                    <td>提示信息</td>
                    <td><span></span></td>
                 </tr>
                 <tr>
                    <td><span>密   码</span></td>
                    <td><input type="password" name="password"/></td>
                 </tr>
                 <tr>
                    <td><span>重复密码</span></td>
                    <td><input type="password" name="repassword"/></td>
                 </tr>
                 
                 <tr>
                    <td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td>
                    <td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="点击刷新验证码" οnclick="getCode()" style="cursor: pointer;"/></td>
                 </tr>

7.上面的jsp代码使用到了用户名通过Ajax进行验证是否已经存在的servlet

package com.syh.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.syh.pojo.Student;
    import com.syh.service.StudentService;
    
    public class CheckUsernameServlet extends HttpServlet{
    
    	
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    			throws ServletException, IOException {
    		doPost(req, resp);
    	}
    	
    	@Override
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		String username = request.getParameter("username");
    		PrintWriter writer = response.getWriter();
    		if(username != null && username != ""){
    			Student student = null;
    			StudentService service = new StudentService();
    			student = service.findSampleStudent(username);
    			System.out.println("啥情况");
    			if(student.getId() == null){
    				System.out.println("ok");
    				writer.write("ok");
    			}else{//不为空的话说明拥有该用户名的学生存在
    				System.out.println("用户名：no" + student.getUsername());
    				writer.write("no");
    			}
    		}else{
    			writer.write("no");
    		}	
    	}
    	
    	
    }

8.验证用户名是否存在的servlet的配置在web.xml

<servlet>
          <servlet-name>CheckUsernameServlet</servlet-name>
          <servlet-class>com.syh.servlet.CheckUsernameServlet</servlet-class>
      </servlet>
      <servlet-mapping>
          <servlet-name>CheckUsernameServlet</servlet-name>
          <url-pattern>/checkUsernameServlet</url-pattern>
      </servlet-mapping>