【js小案例】使用ajax实现验证码功能

最新推荐文章于 2021-08-26 14:49:01 发布

evan_qb

最新推荐文章于 2021-08-26 14:49:01 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签：验证码 ajax

本文链接：https://blog.csdn.net/Evan_QB/article/details/78473722

版权

前端专栏收录该内容

76 篇文章 1 订阅

订阅专栏

首先创建一个验证码

<%@ page contentType="image/jpeg; charset=utf-8" 
		language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"
		pageEncoding="UTF-8"%>
<!-- 以上导入awt和awt.image包 -->
<%!
		//获取随机颜色
		public Color getColor(){
			Random random = new Random();
			//使用rgb()随机产生颜色
			int r = random.nextInt(256);
			int g = random.nextInt(256);
			int b = random.nextInt(256);
			
			return new Color(r,g,b);
		}
		
		//获取随机数字  产生一个4位数
		public String getNum(){
			String str = "";
			Random random = new Random();
			for(int i = 0;i < 4;i++){
				str += random.nextInt(10); //0-9
			}
			return str;
		}
%>

<%
	 	/* 清除缓存 */
	 	response.setHeader("pragma", "mo-cache");
		response.setHeader("cache-control", "no-cache");
		response.setDateHeader("expires", 0);
		//产生矩形框
		BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
		//获取画笔工具
		Graphics g = image.getGraphics();
		//设置矩形框的颜色
		g.setColor(new Color(200,200,200));
		//设置坐标和宽高
		g.fillRect(0, 0, 80, 30);
			 	
		//随机产生干扰线
		for(int i = 0;i < 30;i++){
			Random random = new Random();
			int x = random.nextInt(80);
			int y = random.nextInt(30);
			int x1 = random.nextInt(x + 10);
			int y1 = random.nextInt(y + 10);
			//设置随机颜色
			g.setColor(getColor());
			//画出来
			g.drawLine(x, y, x1, y1);
		}
		
		//字的颜色和数字
		g.setFont(new Font("Microsoft YaHei",Font.BOLD,16));
		g.setColor(Color.BLACK);
		//获取随机数字
		String checkNum = getNum();
		
		//给字拼接空格
		StringBuffer sb = new StringBuffer();
		for(int i = 0;i < checkNum.length();i++){
			sb.append(checkNum.charAt(i) + " ");
		}
		//画出数字
		g.drawString(sb.toString(), 15, 20);
		//存入session域中
		session.setAttribute("CHECKNUM", checkNum); //例如1010
		//将图像以jpeg的形式通过字节流输出
		ImageIO.write(image, "jpeg", response.getOutputStream());
		//清除缓存
		out.clear();
		//放入body中
		out = pageContext.pushBody();
%>

将验证码压缩成图片，在checkcode.jsp中引用,并在该页面中利用ajax向服务器发送数据

<%@ 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>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		table{
			margin: 100px auto;
		}
		
	</style>
  </head>
  
  <body>
  		<table border="0" align="center">
  			<tr>
  				<td>验证码</td>
  				<td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td>
  				<td><img alt="加载失败" src="image.jsp"></td>
  				<td id="show">√√√</td>
  			</tr>
  		</table>
  </body>
  <script type="text/javascript">
  		//去除空格
		function trim(str){
			//从左侧开始替换空格
			str = str.replace(/^\s*/,"");
			//从左侧开始替换空格
			str = str.replace(/\s$/,"");
			return str;
		}
  	
  </script>
  
  <script type="text/javascript">
  		//创建ajax对象
  		function createAjax(){
			var ajax = null;
			try{
				ajax = new ActiveXObject("microsoft.xmlhttp");
			}catch(e){
				try{
					ajax = new XMLHttpRequest();
				}catch(e1){
					alert("请更换浏览器");
				}
			}
			return ajax;
  		}
  </script>
  
  
  <script type="text/javascript">
  		document.getElementById("checkcodeID").onkeyup = function(){
  			var checkcode = this.value;
  			//去除空格
  			checkcode = trim(checkcode);
  			if(checkcode.length == 4){
  				//获取ajax对象
  				var ajax = createAjax();
  				//获取去空格的内容
  				
  				var method = "POST";
  				var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime();
  				//准备发送异步请求
  				ajax.open(method, url);
  				//设置请求头POST提交方式才需要
				ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
				//拼接实体内容
				var content = "checkcode=" + checkcode;  				
  				//发送请求
  				ajax.send(content);
  				
  				//监听服务器状态变化
  				ajax.onreadystatechange = function(){
  					if(ajax.readyState == 4){
  						if(ajax.status == 200){
  							//获取服务器内容
  							var tip = ajax.responseText;
  							//获取图片路径 然后进行放入td中
  							var img = document.createElement("img");
							img.src = tip;
							img.style.width = "14px";
							img.style.height = "14px";
							var td = document.getElementById("show");
							td.innerHTML = "";
							td.appendChild(img);
  						}
  					}
  				}
  				
  			}
  			
  		}
  </script>
</html>

然后编写服务端,接收输入的信息，判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出

public class CheckcodeServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");
		//图片路径
		String tip = "images/MsgError.gif";
		
		String checkcode = req.getParameter("checkcode");
		//测试
		System.out.println(checkcode);
		//获取session域中的数字
		String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM");
		//判断
		if (checkcode.equals(checkcodeService)) {
			tip = "images/MsgSent.gif";
		}
		//输出路径
		PrintWriter pw = resp.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}
}

当输入第4个数字的时候就会出现提示

运行结果:

evan_qb

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【js小案例】使用ajax实现验证码功能

首先创建一个验证码<%@ page contentType="image/jpeg; charset=utf-8" language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*" pageEncoding="UTF-8"%><%! //获取随机颜色 public Color
复制链接

扫一扫