이번에는 ajax 인증코드 구현 방법과 ajax 인증코드 구현 시 주의사항은 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.
본 글의 예시는 참고용으로 인증코드 기능을 구현하기 위한 ajax의 구체적인 코드를 공유하고 있습니다. 구체적인 내용은 다음과 같습니다
먼저 인증코드를 생성하세요:
<%@ 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%>" rel="external nofollow" > <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번째 입력이 입력되면 숫자를 입력하면 프롬프트가 나타납니다.
실행 결과:
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!
추천 자료:
새로 고침이 필요 없는 드롭다운 연결을 구현하는 Ajax+Servlet(코드 포함)
Ajax를 사용하여 json 데이터를 정의되지 않은 상태로 가져오는 방법
위 내용은 Ajax에서 인증 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!