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

关注

原创最新推荐文章于 2026-03-30 03:04:10 发布 992 阅读 AI 写同款· GEO 优化 ›

AJAX与JSP结合的无刷新验证码实现示例 AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过AJAX，Web页面可以进行异步数据交换，这意味着在不需要重新加载整个页面的情况下，可以更新网页的部分内容。AJAX的核心是XMLHttpRequest对象，它允许JavaScript向服务器提出请求，并处理服务器响应，而用户无需离开当前页面。工作原理可以细分为以下几个步骤：当用户在网页上进行某些操作时，如点击按钮，JavaScript会创建一个XMLHttpRequest对象。阅读详情

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="点击刷新验证码" onclick="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="点击刷新验证码" onclick="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>