时间:2021-07-01 10:21:17 帮助过:20人阅读
众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的)。
今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的是ajax+struts2来做的这个验证。 我们新建一个web工程。然后需要导入struts的相应包。之后我们需要写一个类来生成验证码。
这里命名为01_image.jsp,这类的主要功能就是生成验证码,里面是各种画线条,随机数字等,我这里设置的是5个数字的验证,如果你想要改成其他的也可以,大致思路就是在生成数字的那个循环那里加上字母就可以了。
输出流输出 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的内容:
然后就是chenkcode中的js内容了
然后开始写服务器端的代码,进行校验的话就需要这样的一个类了:
输出到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点击不断加载数据列表(图文教程)
浅谈ajax请求技术
非常实用的ajax用户注册模块
以上就是Ajax+Struts2实现验证码验证功能(图文教程)的详细内容,更多请关注Gxl网其它相关文章!