Ajax+Struts2实现验证码验证功能

---------------------------------------------------------------------------------------------------------------
[版权申明:本文系作者原创,转载请注明出处]
文章出处:http://blog.csdn.net/sdksdk0/article/details/51755489
作者:朱培   ID:sdksdk0
---------------------------------------------------------------------------------------------------------------

今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的是ajax+struts2来做的这个验证。 我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。

这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,如果你想要改成其他的也可以,大致思路就是在生成数字的那个循环那里加上字母就可以了。

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="image/jpeg"  import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
public Color getColor(){
    Random random = new Random();
    int r = random.nextInt(256);//0-255
    int g = random.nextInt(256);
    int b = random.nextInt(256);
    return new Color(r,g,b);
}
public String getNum(){
    String str = "";
    Random random = new Random();
    for(int i=0;i<5;i++){
        str += random.nextInt(10);//0-9
    }
    return str;
}
%>
<%
response.setHeader("pragma", "no-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 < 50; i++) {
    Random random = new Random();
    int x = random.nextInt(80);
    int y = random.nextInt(30);
    int xl = random.nextInt(x+10);
    int yl = random.nextInt(y+10);
    g.setColor(getColor());
    g.drawLine(x, y, x + xl, y + yl);
}

g.setFont(new Font("serif", Font.BOLD,16));
g.setColor(Color.BLACK);
String checkNum = getNum();//"2525"

StringBuffer sb = new StringBuffer();
for(int i=0;i<checkNum.length();i++){
    sb.append(checkNum.charAt(i)+" ");//"2 5 2 5"
}
g.drawString(sb.toString(),15,20);

session.setAttribute("CHECKNUM",checkNum);//2525

//通过字节输出流输出
ImageIO.write(image,"jpeg",response.getOutputStream());
out.clear();
out = pageContext.pushBody();
%>

接下来把输入验证码的html页面写好,我这里是些在了一个jsp文件中的。命名为checkcode.jsp

                <th>验证码:</th>
                <td><input type="text"  name="checkcode" id="checkcodeID"  maxlength="5" /></td>
                <td><img   src="01_image.jsp" id="imgID"  /></td>
                <td id="resID"></td>

            </tr>
        </table>
    </form>

然后给这个文件添加javascript代码,这里使用的当然就是一个ajax啦,对于ajax的编码步骤之前已经写的很详细了,所以我们这里就直接使用了。 对于ajax.js写好后放到js目录下面,然后再找个checkcode.jsp中引入中国js文件 ajax.js的内容:

//创建AJAX异步对象,即XMLHttpRequest
function createAJAX(){
var ajax = null;
try{
    ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
    try{
        ajax = new XMLHttpRequest();
    }catch(e2){
        alert("你的浏览器不支持ajax,请更换浏览器");
    }
}
return ajax;
}

然后就是chenkcode中的js内容了

//去掉两边的空格
        function trim(str){
            str=str.replace(/^\s*/,"");//从左侧开始,把空格去掉
            str=str.replace(/\s*$/,""); //从右侧开始,把K歌都去掉
            return str;
        }

        document.getElementById("checkcodeID").onkeyup=function(){
            var checkcode=this.value;
            checkcode=trim(checkcode);
            if(checkcode.length==5){

                var ajax=createAJAX();

                var method="POST";
                var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime();
                ajax.open(method,url);

                //设置ajax请求头为post,它会将请求的汉字自动进行utf-8的编码
                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;

                            var img=document.createElement("img");
                            img.src=tip;
                            img.style.width="14px";
                            img.style.height="14px";
                            var td=document.getElementById("resID");
                            td.innerHTML="";
                            td.appendChild(img);

                        }
                    }
                }
            }else{
                var td=document.getElementById("resID");
                td.innerHTML="";

            }

        }

然后开始写服务器端的代码,进行校验的话就需要这样的一个类了:

package cn.tf.checkcode;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

//验证码检查
public class CheckcodeAction extends ActionSupport{

private  String checkcode;
public void setCheckcode(String checkcode) {
    this.checkcode = checkcode;
}

/**
 * 验证
 * @throws IOException
 */

public String check() throws IOException {
    //图片路径
    String tip="images/a.jpg";

    //从服务器获取session中的验证码
    String checkcodeServer=(String) ActionContext.getContext().getSession().get("CHECKNUM");

    if(checkcode.equals(checkcodeServer)){
        tip="images/b.jpg";

    }
    //以IO流的方式将tip变量输出到ajax异步对象中
    HttpServletResponse  response=ServletActionContext.getResponse();
    response.setContentType("text/html;charset=UTF-8");
    PrintWriter pw=response.getWriter();
    pw.write(tip);
    pw.flush();
    pw.close();

    return null;

}
}

最后在struts.xml文件中写入相应的方法。

  <struts>
 <package name="myPackage" extends="struts-default" namespace="/">
        <action
            name="checkRequest"
            class="cn.tf.checkcode.CheckcodeAction"
            method="check">
        </action>
</package>
</struts>

运行结果如下:验证成功则返回绿色的小勾,错误则红色的叉。

源码下载地址:http://download.csdn.net/detail/sdksdk0/9558933

时间: 2024-10-06 08:25:23

Ajax+Struts2实现验证码验证功能的相关文章

Ajax+Struts2实现验证码验证功能实例代码_AJAX相关

众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

Ajax+Struts2实现验证码验证功能实例代码

众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的). 今天分享的是通过ajax来动态的验证验证码输入是否正确.我们这里采用的是ajax+struts2来做的这个验证. 我们新建一个web工程.然后需要导入struts的相应包.之后我们需要写一个类来生成验证码. 这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,

Java实现验证码验证功能

Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢? Java实现验证码验证功能其实非常简单:用到了一个Graphics类在画板上绘制字母,随机选取一定数量的字母随机生成,然后在画板上随机生成几条干扰线. 首先,写一个验证码生成帮助类,用来绘制随机字母: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.ima

Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)_php实例

本文实例讲述了Zend Framework生成验证码并实现验证码验证功能的方法.分享给大家供大家参考,具体如下: 今天讲述如何在留言本中实现验证码的功能..这样有利于我们网站减少一些垃圾留言或是广告留言..在这是我没有运用Zend Framework自带的Zend_Captcha组件..我只是找到ThinkPHP这个框架里的验证码类..就把它运用到了..我们留言本验证码的实现上...我在这里..是把它写成一个插件的形式...当然Zend Framework有很多方式运用其它代码..我现在只会运用

Ajax实现异步用户名验证功能

先看看布局比较简单,效果图如下 ajax功能: 当用户填写好账号切换到密码框的时候,使用ajax验证账号的可用性.检验的方法如下:首先创建XMLHTTPRequest对象,然后将需要验证的信息(用户名)发送到服务器端进行验证,最后根据服务器返回状态判断用户名是否可用. function checkAccount(){ var xmlhttp; var name = document.getElementById("account").value; if (window.XMLHttpR

JS实现表单验证功能(验证手机号是否存在,验证码倒计时)_javascript技巧

废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

JavaScript生成验证码并实现验证功能_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <title>验证码</title> <style type="text/css"> #code { font-family:Arial; font-style:italic; font-weight:bold; border:0; letter-spacing:2px; color:blue; } </style> <scri

Ajax和PHP正则表达式验证表单及验证码_php实例

模式匹配符: \:转义字符 例如:\b转义了b ^:正则表达式开始符号 $:正则表达式结束符号 *:匹配前面的字符出现0次或者n次 +:匹配前面的字符出现1次或者n次 ?:匹配前面的字符出现0次或者1次 .:匹配除了换行符以外的所有单个字符 |:或者的意思,例如x|y 匹配x或者y {n}:匹配前面的n个字符 {n,m}:匹配至少n个最多m个前面字符 [xyz]:匹配中括号里的任意一个字符 [^xyz]:匹配除了中括号里的任意一个字符等价于[0-9] \w:匹配任意一个数字或字母或下划线 等价于

struts2与cookie 实现自动登录和验证码验证实现代码_java

主要介绍struts2与cookie结合实现自动登录 struts2与cookie结合时要注意采用.action 动作的方式实现cookie的读取 struts2的jar包  链接数据库文件 db.properties dbDriver = oracle.jdbc.driver.OracleDriver url = jdbc:oracle:thin:@localhost:1521:orcl userName=test password=password dao层类代码,通过登录名获取用户信息 p