博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【js小案例】使用ajax实现验证码功能
阅读量:2056 次
发布时间:2019-04-28

本文共 2918 字,大约阅读时间需要 9 分钟。

首先创建一个验证码

<%@ page contentType="image/jpeg; charset=utf-8" 		language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"		pageEncoding="UTF-8"%>
<%! //获取随机颜色 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+"/";%>              验证码    	
验证码 加载失败 √√√
然后编写服务端,接收输入的信息,判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出

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个数字的时候就会出现提示

运行结果:

你可能感兴趣的文章
【日语】五十音图-一个好用的日语五十音图记忆方法
查看>>
linux下使用crontab实现定时PHP计划任务失败的原因分析
查看>>
linux环境下安装redis扩展
查看>>
一个简单大方的赞后+1,踩后-1js动画效果
查看>>
新手学习编程的最佳方式
查看>>
从json_encode过来的的字符串被返回到html页面时的解析
查看>>
linux虚拟机局域网网卡配置
查看>>
用js判断是否为手机浏览,如果是手机浏览就跳转到手机站
查看>>
每天一个linux命令(26):用SecureCRT来上传和下载文件(转载自竹子)
查看>>
定时启动计划任务(转载自网络)
查看>>
Javascript的RegExp对象(转载自网络)
查看>>
rwx对于文件和目录的意义
查看>>
借助csv用PHP生成excel文件
查看>>
使用SimpleXML解析xml文件数据
查看>>
php读取excel文档内容(转载)
查看>>
vim基本命令(转载自网络)
查看>>
Linux学习(二十二)Shell基础(二)变量、环境变量配置文件
查看>>
Linux学习(二十四)正则表达式(二)sed
查看>>
Linux学习(二十三)正则表达式(一)grep/egrep
查看>>
Linux学习(二十六)日常管理(一)w、vmstat、top、sar、nload、iostat、iotop
查看>>