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

前端  /  管理员 发布于 5年前   252

众所周知，验证码在我们的生活中都是非常常见的，很多公司都在各种折腾各种各样的验证码，这里简要的用一个小案例来实现验证码的功能（ps:其实我挺讨厌验证码这个东西的）。

今天分享的是通过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-255int 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="//article/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异步对象，即XMLHttpRequestfunction 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>

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

以上所述是小编给大家介绍的Ajax+Struts2实现验证码验证功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！