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 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

Ajax + サーブレットによるリフレッシュ不要のドロップダウンリンクの実装 (コード付き)

Ajax を使用して json データを未定義として取得する方法

以上がAjaxで検証コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。