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

前端技术 2023/09/02 AJAX

众所周知，验证码在我们的生活中都是非常常见的，很多公司都在各种折腾各种各样的验证码，这里简要的用一个小案例来实现验证码的功能（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-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>

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

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

本文地址：https://www.stayed.cn/item/4289

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案