Ajax에서 인증 코드를 구현하는 방법

이번에는 ajax 인증코드 구현 방법과 ajax 인증코드 구현 시 주의사항은 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.

본 글의 예시는 참고용으로 인증코드 기능을 구현하기 위한 ajax의 구체적인 코드를 공유하고 있습니다. 구체적인 내용은 다음과 같습니다

먼저 인증코드를 생성하세요:

 
<!-- 以上导入awt和awt.image包 --> 
 
 

인증코드를 이미지로 압축해서 인용하세요. checkcode.jsp에 있고, 이 페이지에서는 ajax를 이용해 서버로 데이터를 전송합니다

 
 
 
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 
  
 <base>" rel="external nofollow" > 
  
 <title>验证码</title> 
  
 <meta> 
 <meta> 
 <meta>  
 <meta> 
 <meta> 
 <style> 
  table{ 
   margin: 100px auto; 
  } 
   
 </style> 
  
 
  
  

                                      

验证码

√√√

      <script> //去除空格 function trim(str){ //从左侧开始替换空格 str = str.replace(/^\s*/,""); //从左侧开始替换空格 str = str.replace(/\s$/,""); return str; } </script>     <script> //创建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> 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> 

그런 다음 서버에 입력 정보를 받아 인증코드와 일치하는지 확인하고, 해당 이미지의 경로를 폼으로 출력하도록 작성합니다. 의 출력 스트림

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!