使用ajax怎么实现一个验证码功能
本篇文章给大家分享的是有关使用ajax怎么实现一个验证码功能,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联建站主要从事成都做网站、成都网站制作、成都外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务海兴,10多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
首先创建一个验证码:
<%@ 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+"/"; %>" rel="external nofollow" > 验证码
验证码 | √√√ |
然后编写服务端,接收输入的信息,判断是否与验证码相互匹配,将对应的图片的路径以输出流的方式输出
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个数字的时候就会出现提示
运行结果:
以上就是使用ajax怎么实现一个验证码功能,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
标题名称:使用ajax怎么实现一个验证码功能
文章位置:http://ybzwz.com/article/goshjo.html