• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

jquery 搞代码 4年前 (2021-12-27) 24次浏览 已收录 0个评论

这篇文章主要介绍了Ajax+Struts2实现验证码验证功能实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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

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

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

 <%! 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<% 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.setCo<em style="color:transparent">来源[email protected]搞@^&代*@码网</em>lor(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

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

 <th>验证码:</th><td></td><td></td><td id="resID"></td></tr></table>

然后给这个文件添加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-600"; //从服务器获取session中的验证码 String checkcodeServer=(String) ActionContext.getContext().getSession().get("CHECKNUM"); if(checkcode.equals(checkcodeServer)){ tip="images/b.jpg-600"; } //以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文件中写入相应的方法。

    

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

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

以上就是Ajax+Struts2实现验证码验证功能实例代码的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Ajax+Struts2实现验证码验证功能实例代码

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址