zoukankan      html  css  js  c++  java

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

    案例实现效果

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

    前端代码

    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. }  

　　

　　

　　

查看全文
  • 相关阅读:
    Git 安装配置，key导入
    Android集成支付宝的坑
    RxJava 的使用入门
    RecyclerView 介绍 02 – 重要概念
    AndroidTips：selector的disable状态为什么无效？
    AndroidTips：解决Dialog全屏显示以及Dialog显示自动弹出输入法
    RecyclerView 介绍 01
    python模块-----sqlAlchemy
    python模块-----pyinstaller
    python模块------socket
  • 原文地址：https://www.cnblogs.com/jpfss/p/8446369.html
    • Copyright © 2011-2022 走看看