- 浏览: 284166 次
- 性别:
- 来自: 兰州
文章分类
- 全部博客 (116)
- 给网友答疑 (1)
- J2EE (16)
- DesignPattern (14)
- OtherArchive (5)
- lucene and compass (1)
- JasperReport (2)
- FusionCharts (2)
- Classical algorithm (2)
- JS (5)
- ZK Ajax (1)
- ubuntu-linux (4)
- Weka (0)
- IDE Config (6)
- JAVA 底层 (3)
- C\C++ (4)
- Android (15)
- 项目展示 (1)
- 娱乐生活 (16)
- 电驴资源 (1)
- 网络转载 (1)
- 程序员 毛病 (1)
- Android,开发日志 (2)
- java (1)
- openGL es (2)
- MAC (1)
最新评论
-
洋葱pp奥特曼:
求大神再发一次资源,万分感激!!小弟邮箱:173992660@ ...
使用JQuery-Week-Calendar做日程 -
xbliu564:
请问版本号
fusionchart 破解文件SWF -
xue_lang:
看了半天,有点坑爹的赶脚,哎
状态模式(State) -
teacup_madman:
我只能说。这个程序可以去掉的地方太多了。这个真的是State模 ...
状态模式(State) -
冬日的阳光:
TrafficLight这个类的change方法可以改一下,如 ...
状态模式(State)
首先看看效果图:
如上图,点击验证码可以异步的刷新,借助了一个Jquery插件——jquery.qtip插件,和jcaptcha 配置生成验证码。
1.先配置好,能生成jcaptcha的环境,
在web.xml中添加如下内容:
<servlet>
<servlet-name>jcaptcha2</servlet-name> <servlet-class>com.jxs.sys.core.global.jcaptcha.ImageCaptchaServlet</servlet-class> <load-on-startup>0</load-on-startup> </servlet> <servlet-mapping> <servlet-name>jcaptcha2</servlet-name> <url-pattern>/jcaptcha</url-pattern> </servlet-mapping>
2.设置Servlet和regx,
package com.jxs.sys.core.global.jcaptcha; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.IOException; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.context.WebApplicationContext; import org.springframework.web.context.support.WebApplicationContextUtils; import com.octo.captcha.service.CaptchaServiceException; import com.octo.captcha.service.image.ImageCaptchaService; import com.sun.image.codec.jpeg.JPEGCodec; import com.sun.image.codec.jpeg.JPEGImageEncoder; @SuppressWarnings("serial") public class ImageCaptchaServlet extends HttpServlet { private ImageCaptchaService imageCaptchaService; private String beanName = "imageCaptchaService"; public void init(ServletConfig servletConfig) throws ServletException { super.init(servletConfig); WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(servletConfig.getServletContext()); imageCaptchaService = (ImageCaptchaService) wac.getBean(beanName, ImageCaptchaService.class); } protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { byte[] captchaChallengeAsJpeg = null; ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream(); try { String captchaId = httpServletRequest.getSession().getId(); BufferedImage challenge = imageCaptchaService.getImageChallengeForID(captchaId, httpServletRequest.getLocale()); JPEGImageEncoder jpegEncoder = JPEGCodec.createJPEGEncoder(jpegOutputStream); jpegEncoder.encode(challenge); } catch (IllegalArgumentException e) { httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND); return; } catch (CaptchaServiceException e) { httpServletResponse.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); return; } captchaChallengeAsJpeg = jpegOutputStream.toByteArray(); httpServletResponse.setHeader("Cache-Control", "no-store"); httpServletResponse.setHeader("Pragma", "no-cache"); httpServletResponse.setDateHeader("Expires", 0); httpServletResponse.setContentType("image/jpeg"); ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream(); responseOutputStream.write(captchaChallengeAsJpeg); responseOutputStream.flush(); responseOutputStream.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doGet(req, resp); } }
其他的代码,参见下载:jcaptcha_src.rar,
2.借助jquery去完成核心的代码。
首先设置logo.jsp
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script> <script type="text/javascript"> var contextPath = '${pageContext.request.contextPath}'; </script> <script type="text/javascript" src="js/jcaptcha.js"></script>
接下来就是要完成jcaptcha.js文件。
代码先给出,在解释:
var $j = jQuery.noConflict(); var realoadRandom = Math.random(); function refreshLoadRandom(obj, src){ realoadRandom = Math.random(); obj.src = src + "&ran=" + realoadRandom; } $j(document).ready(function(){ var i, styles, tooltipCount; tooltipCount = 0; styles = ['blue']; function createTooltip(){ if (++tooltipCount == styles.length + 1) return; this.elements.tooltip.qtip({ content: '<img align=\"middle\" style=\"text-align: center; cursor: pointer;\" src=\"' + contextPath + '/jcaptcha\" onclick=\"this.src=\'' + contextPath + '/jcaptcha?now=' + realoadRandom + '\';refreshLoadRandom(this,\'' + contextPath + '/jcaptcha?nowa=nk\');\" alt=\"看不清,点击换一张\"/>', position: { corner: { tooltip: 'leftMiddle', target: 'rightMiddle' }, adjust: { resize: true, scroll: true } }, show: { ready: true }, hide: false, style: { name: styles[tooltipCount - 1], width: 107, height: 30, size: { x: 12, y: 12 }, tip: true }, api: { onRender: createTooltip } }); } createTooltip.call({ elements: { tooltip: $j('#j_captcha_response') } }); $j('#j_username').qtip({ position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' } }, content: "请在此输入您的用户名!", style: { name: 'blue', padding: '7px 13px', width: 250, tip: true } }); $j('#j_password').qtip({ position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' } }, content: "请在此输入您的密码!", style: { name: 'blue', padding: '7px 13px', width: 250, tip: true } }); $j('#j_captcha_response').qtip({ position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' } }, content: "请在此输入左边验证码!", style: { name: 'blue', padding: '7px 13px', width: 200, tip: true } }); $j('#j_button_submit').qtip({ position: { corner: { target: 'topMiddle', tooltip: 'bottomMiddle' } }, content: "点击此处提交登录信息!", style: { name: 'blue', padding: '7px 13px', width: 250, tip: true } }); });
这里有一个小小的技巧,那就是不让浏览器缓存验证码图片,var realoadRandom = Math.random();在外面设置了
这个变量,做随机变量。
function refreshLoadRandom(obj, src){
realoadRandom = Math.random();
obj.src = src + "&ran=" + realoadRandom;
}
目的还是清楚缓存的辅助方法。
content: '<img align=\"middle\" style=\"text-align: center; cursor: pointer;\" src=\"' + contextPath + '/jcaptcha\" onclick=\"this.src=\'' + contextPath + '/jcaptcha?now=' + realoadRandom + '\';refreshLoadRandom(this,\'' + contextPath + '/jcaptcha?nowa=nk\');\" alt=\"看不清,点击换一张\"/>',
这个才是真正的生成验证码图片提示框的,src就是servlet地址,onclick是一部调用的关键,采用this.src重新赋值的
形式清楚浏览器的缓存,后面跟着一个无用的参数,名字随便起,之后realoadRandom是改变值了,要是不在此修改src的话,浏览器会缓存下来,所以要改变realoadRandom的,并且在此切换src的地址,保证不被缓存,点击的时候一次是
切换这两个地址,改变其src获取不同的图片。
- jcaptcha_src.rar (4.4 KB)
- 描述: JCaptcha-Src
- 下载次数: 298
- 客户端-login.rar (244 KB)
- 描述: login
- 下载次数: 258
评论
6 楼
ldsjdy
2011-09-24
不错,刚好需要用到,参考一下
5 楼
binge520
2011-05-11
能不能简单点 挺麻烦的
4 楼
TESZLX
2010-11-02
BestUpon 写道
笑我痴狂 写道
nighthawk 写道
我说啊,就一个验证码怎么搞的这么复杂
同意
各有所见:正所谓,同样是饼子,为什么还会有烧饼,不就是饼子么?调味品不一样而已。
3 楼
BestUpon
2010-09-13
笑我痴狂 写道
nighthawk 写道
我说啊,就一个验证码怎么搞的这么复杂
同意
各有所见:正所谓,同样是饼子,为什么还会有烧饼,不就是饼子么?调味品不一样而已。
2 楼
笑我痴狂
2010-09-13
nighthawk 写道
我说啊,就一个验证码怎么搞的这么复杂
同意
1 楼
nighthawk
2010-08-18
我说啊,就一个验证码怎么搞的这么复杂
发表评论
-
Spring MVC 和 Struts2 比较
2011-02-28 16:55 19861.struts2框架是类级别的拦截,每次来了请求就创建一个A ... -
写点程序的那些糗事(2)
2010-12-16 14:29 1092昨天给商学院做的专家品审系统正式的运行了,来的全部是一些大领导 ... -
Spring3 mvc 国际化时的一点注意
2010-12-13 09:37 1702Spring3 MVC 中:如果使用国际化的形式,如 ... -
MySQLIntegrityConstraintViolationException 解决办法
2010-10-19 16:51 18778使用JPA做映射: /** * 指标 * ... -
写点程序的那些糗事(1)
2010-09-27 19:31 1235写点程序就要认真点,为什么呢?会有效率问题的!引例: ... -
编程语言结构图
2010-09-23 12:22 1158编程语言就是这么个样子的!还要讨论什么是“排名战”么? ... -
在线试听(播放器)防止盗链下载实现讨论_障眼法实现
2010-09-06 12:10 6241《读者》电子出版平台有个附属项目,需求描述是这样的: ... -
JavaMail、Commons Email发送邮件 出现结果后到的文件是Base64的问题的解决办法
2010-08-19 23:09 5191今天折腾了一天,有个业务需要写个简单的邮件发送,但是测试了。从 ... -
Eclipse 3.6 插件资源-持续更新ing-更新15次--欢迎有好用插件的朋友推荐
2010-08-17 11:00 7657欢迎有好用插件的朋友推荐! 注:没有提示说明安装的,直 ... -
Jpa 时间段间的查询问题解决办法
2010-05-27 22:13 22584最近在做法院的一个档案管理项目,一直做的的查询是基于compa ... -
dhtmlXTree 与后台交互数据
2009-11-06 14:44 1859今天要写一个获得dhtmlXTree 节点值的,大量的Id节点 ... -
Struts2 OGNL中的投影(过滤)与软件工程
2009-11-05 11:54 1859Struts2 OGNL中的投影(过滤) <s: ... -
Struts2 doubleSelect
2009-10-30 14:17 1486今天要用到一个二级联动,以前都是使用JavaScript编写, ... -
Struts2 的三种接受参数的方式
2009-10-28 16:59 19981、通过普通参数的getter and setter方式 ... -
JDBC CRUD操作的粗略封装DEMO
2009-10-15 12:19 4567暮然回首,看看jDBC的操作,原来很多的东西都忘记了, ...
相关推荐
在TIPTOPGP中实现DM码打印,打包文件中有详细步骤,手把手教你怎么配置。粘贴实现代码,清晰了然。支持jdk1.6的zxing包(下载以后4gl里面游标改一下别名)
本文主要讲了TIP42c三极管参数及引脚图的相关知识,希望对你的学习有所帮助。
Tip类demo Tip类demo Tip类demo Tip类demo Tip类demo Tip类demo
Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf Optimal Tip-To-Tip Efficiency(弟高值d2f算法).pdf ...
在Easyui的1.3.3版本中,作者新增了tooltip组件,尽管样式看起来也...之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip,更为丑陋,有了Easyui 1.3.3的tooltip,我们实现起来就很容易了
最近定制开发了一套适合企业的条码扫码平台,支持鼎捷Tiptop T100、Tiptop GP平台二次开发,已经在五六家企业磨炼成品,欢迎咨询交流。具有以下功能: 1)根据原来企业规则生成二维码 2)通过PDA扫描条码完成出...
TIPTOP與其他系統之WebService接口資料
tiptop erp 系统基本资料,深圳数码的哦
神州数码易拓TIPTOP ERP集成WEB应用(Flexigrid插件使用)
ring and tip for voip ect ring and tip for voip ectring and tip for voip ect
漂亮的jquery tip,类似于弹出层的效果,很漂亮
vc 编辑框显示tip,当鼠标停在编辑框上时,显示tip提示
js中的tip提示信息js中的tip提示信息js中的tip提示信息js中的tip提示信息
tiptop程序设计
使用TIPTOP双硬盘物理隔离卡,只需增加一个硬盘,即可使一台计算机变成两台相对独立的计算机。两个硬盘分别连接内外网络,在内外网络之间实施有效的物理隔离,确保内网信息安全,同时方便连接国际互联网。内外网可...
TIP122 数据手册 PDF。
TIPTOP ERP 不完全实施开发手册,包含以下内容: 1、Linux基础操作 2、Oracle SQL 3、Genero Studio 4GL开发 4、TIPTOP ERP 二次开发及各模块手册 5、JAVA基础 6、JSP基础
tiptop 4gl CR 公司内部开发技术文档资料,tiptop 4gl CR 公司内部开发技术文档资料tiptop 4gl CR 公司内部开发技术文档资料。
TIPTOP ERP前台udm_tree添加前台更改GDC登陆Linux密码应用
VB技巧使用100个TIP 建议 新手必看