码迷，mamicode.com
首页 > Web开发 > 详细

AJAX(二)-实现验证码异步验证功能

时间：2018-02-13 13:26:51      阅读：260      评论：0      收藏：0      [点我收藏+]

标签：data   tools   2.3   ade   style   rap   request   set   graphics   

案例实现效果

用户在前端输入验证码，按键收起触发异步验证，验证验证码的对错

技术分享图片

技术分享图片

前端代码

checkcode.jsp

[java] view plain copy
 print?
  1. <%--  
  2.   Created by IntelliJ IDEA.  
  3.   User: cxspace  
  4.   Date: 16-8-18  
  5.   Time: 下午7:45  
  6.   To change this template use File | Settings | File Templates.  
  7. --%>  
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>  
  9. <html>  
  10. <head>  
  11.     <title>验证码检查</title>  
  12.     <script type="text/javascript" src="js/ajax.js"></script>  
  13. </head>  
  14. <body>  
  15.    <form>  
  16.        <table border="0" align="center">  
  17.            <th>验证码:</th>  
  18.            <td><input size="3" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>  
  19.            <td><img src="check/checkImage.jsp" /></td>  
  20.            <td id="res"></td>  
  21.        </table>  
  22.    </form>  
  23.   
  24.    <script type="text/javascript">  
  25.   
  26.        //去掉两边空格  
  27.        function trim(str) {  
  28.            //正则表达式去掉左边空格  
  29.            str = str.replace(/^\s*/,""); //换掉左边空格  
  30.            str = str.replace(/\s*$/,"");  //换掉右边空格  
  31.            return str;  
  32.        }  
  33.   
  34.    </script>  
  35.   
  36.    <script type="text/javascript">  
  37.        document.getElementById("checkcodeID").onkeyup = function () {  
  38.   
  39.            var checkcode = this.value;  
  40.            var checkcode = trim(checkcode);  
  41.   
  42.            if (checkcode.length == 4){  
  43.                var ajax = createAJAX();  
  44.                var method = "POST";  
  45.                var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();  
  46.                ajax.open(method,url);  
  47.                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");  
  48.                var content = "checkcode="+checkcode;  
  49.                ajax.send(content);  
  50.                ajax.onreadystatechange = function () {  
  51.                    if(ajax.readyState == 4){  
  52.                        if (ajax.status == 200){  
  53.                            var tip = ajax.responseText;  
  54.                            var img = document.createElement("img");  
  55.                            img.src = tip;  
  56.                            img.style.width = "14px";  
  57.                            img.style.height = "14px";  
  58.                            var td = document.getElementById("res");  
  59.                            td.innerHTML="";  
  60.                            td.appendChild(img)  
  61.                        }  
  62.                    }  
  63.                }  
  64.            }else {  
  65.   
  66.                var td = document.getElementById("res");  
  67.                td.innerHTML = "";  
  68.            }  
  69.        }  
  70.    </script>  
  71.   
  72. </body>  
  73. </html>  

ajax.jsp

[java] view plain copy
 print?
  1. //创建AJAX异步对象，即XMLHttpRequest  
  2. function createAJAX(){  
  3.     var ajax = null;  
  4.     try{  
  5.         ajax = new ActiveXObject("microsoft.xmlhttp");  
  6.     }catch(e1){  
  7.         try{  
  8.             ajax = new XMLHttpRequest();  
  9.         }catch(e2){  
  10.             alert("你的浏览器不支持ajax，请更换浏览器");  
  11.         }  
  12.     }  
  13.     return ajax;  
  14. }  

checkImage.jsp

[java] view plain copy
 print?
  1. <%--  
  2.   Created by IntelliJ IDEA.  
  3.   User: cxspace  
  4.   Date: 16-8-18  
  5.   Time: 下午5:39  
  6.   To change this template use File | Settings | File Templates.  
  7. --%>  
  8. <%@ page language="java" pageEncoding="UTF-8" %>  
  9. <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>  
  10. <%!  
  11.   
  12.     //获取随机颜色值  
  13.     public Color getColor(){  
  14.   
  15.         Random random = new Random();  
  16.   
  17.         int r = random.nextInt(256);  
  18.   
  19.         int g = random.nextInt(256);  
  20.   
  21.         int b = random.nextInt(256);  
  22.   
  23.         Color color = new Color(r,g,b);  
  24.   
  25.         return color;  
  26.     }  
  27.   
  28.     //获取四位随机数连成的字符串  
  29.     public String getNum(){  
  30.   
  31.         String str = "";  
  32.   
  33.         Random random = new Random();  
  34.   
  35.         for(int i = 0 ; i < 4 ; i++){  
  36.             str += random.nextInt(10);  
  37.         }  
  38.   
  39.         return  str;  
  40.     }  
  41. %>  
  42.   
  43. <%  
  44.     //设置浏览器不缓存图片  
  45.     response.setHeader("pragma","mo-cache");  
  46.     response.setHeader("cache-control","no-cache");  
  47.     response.setDateHeader("expires",0);  
  48.   
  49.     //设置图片大小和背景  
  50.     BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);  
  51.     //创建画笔对象  
  52.     Graphics g = image.getGraphics();  
  53.     g.setColor(new Color(200,200,200));  
  54.     g.fillRect(0,0,80,30);  
  55.   
  56.     for (int i = 0 ; i < 20 ; i++){  
  57.         Random random = new Random();  
  58.   
  59.         int x = random.nextInt(80);  
  60.         int y = random.nextInt(30);  
  61.         int x1 = random.nextInt(x+10);  
  62.         int y1 = random.nextInt(y+10);  
  63.   
  64.         //背景模糊线使用随机色  
  65.         g.setColor(getColor());  
  66.         g.drawLine(x,y,x+x1,y+y1);  
  67.     }  
  68.   
  69.     g.setFont(new Font("serif",Font.BOLD,16));  
  70.     g.setColor(Color.black);  
  71.     String checkNum = getNum();  
  72.   
  73.     //给字符串字符之间加空格  
  74.     StringBuffer sb = new StringBuffer();  
  75.     for (int i = 0 ; i < checkNum.length() ; i ++){  
  76.         sb.append(checkNum.charAt(i)+" ");  
  77.     }  
  78.     g.drawString(sb.toString(),10,20);  
  79.   
  80.     session.setAttribute("checkNum",checkNum);  
  81.   
  82.     ImageIO.write(image,"jpeg",response.getOutputStream());  
  83.     out.clear();  
  84.     out = pageContext.pushBody();  
  85. %>  

后端代码

action配置

[java] view plain copy
 print?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <!DOCTYPE struts PUBLIC  
  4.         "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"  
  5.         "http://struts.apache.org/dtds/struts-2.3.dtd">  
  6.   
  7. <struts>  
  8.    <package name="myPackage" namespace="/" extends="struts-default">  
  9.   
  10.       <action name="checkRequest"  
  11.               class="checkcode.CheckcodeAction"  
  12.               method="check">  
  13.   
  14.       </action>  
  15.   
  16.    </package>  
  17.   
  18. </struts>  

checkcode.CheckcodeAction

[java] view plain copy
 print?
  1. package checkcode;  
  2.   
  3. import com.opensymphony.xwork2.ActionContext;  
  4. import com.opensymphony.xwork2.ActionSupport;  
  5. import org.apache.struts2.ServletActionContext;  
  6.   
  7. import javax.servlet.http.HttpServletResponse;  
  8. import java.io.PrintWriter;  
  9.   
  10. /** 
  11.  * Created by cxspace on 16-8-18. 
  12.  */  
  13. public class CheckcodeAction extends ActionSupport{  
  14.   
  15.     private String checkcode;  
  16.   
  17.     public void setCheckcode(String checkcode) {  
  18.         this.checkcode = checkcode;  
  19.     }  
  20.   
  21.     public String check() throws Exception {  
  22.   
  23.         String tip = "images/MsgError.gif";  
  24.   
  25.         String checkcodeServer = (String) ActionContext.getContext().getSession().get("checkNum");  
  26.   
  27.         if (checkcode.equals(checkcodeServer)){  
  28.             tip="images/MsgSent.gif";  
  29.         }  
  30.   
  31.         HttpServletResponse response = ServletActionContext.getResponse();  
  32.   
  33.         response.setContentType("text/html;charset=UTF-8");  
  34.         PrintWriter pw = response.getWriter();  
  35.         pw.write(tip);  
  36.         pw.flush();  
  37.         pw.close();  
  38.   
  39.         return null;  
  40.     }  
  41. }  

　　

　　

 

 

　　

 

AJAX(二)-实现验证码异步验证功能

标签：data   tools   2.3   ade   style   rap   request   set   graphics   

原文地址：https://www.cnblogs.com/jpfss/p/8446369.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！