Struts2整合jcaptcha

最新推荐文章于 2018-09-05 15:11:34 发布

原创最新推荐文章于 2018-09-05 15:11:34 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Servlet #Ajax #JavaScript #ViewUI

Struts2 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用 jCaptcha 类库实现在 Web 应用中的验证码功能。通过配置 Servlet 和 JavaScript 交互，实现了验证码图片的动态展示及刷新功能，并支持用户名 Cookie 的保存与读取。

		    <div>
		      <label for="captcha">验证码</label>
		      <br/>
		      <input type="text" id="captcha" name="captcha" value=""/>
		      <img src="/jcaptcha.jpg" id="captchaPic"/>
		    </div>

    <!--验证码-->
    <servlet>
        <servlet-name>jcaptcha</servlet-name>
        <servlet-class>com.octo.captcha.module.servlet.image.SimpleImageCaptchaServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>jcaptcha</servlet-name>
        <url-pattern>/jcaptcha.jpg</url-pattern>
    </servlet-mapping>

jcaptcha是一个验证码的类库

ssh2的话,已经有commons-collections和logging了

<script type="text/javascript">
		$(function(){
			$('#b-loginForm').dialog({
				autoOpen: true,
				title: '登录也精彩',
			});

			var cookiePath="/page";
			
			/*若重新加载(isReload==1),则显示图片且获得用户名的值*/
			if($.cookie("isReload")==1){
				//设置用户名
				var usernameVal=$.cookie("username");
				$("#username").val(usernameVal);
				
				$("#captchaPic").show("fast");
				$("#password").focus();
				$.cookie("isReload",0,{ path: cookiePath });
			}else{
				$("#captchaPic").hide();	
			}
			
			/*若获得焦点则显示图片*/
			$("#captcha").focusin(function(){
				$("#captchaPic").show("fast");	
			});

			/*刷新页面且设置用户名cookie*/
			$("#captchaPic").click(function(){
				var usernameVal=$.trim($("#username").val());
				if(usernameVal.length>0){
					$.cookie("username",usernameVal,{ expires: 7, path: cookiePath });
				}else{
					$.cookie("username","",{ expires: 7, path: cookiePath });
				}
					
				$.cookie("isReload",1,{ expires: 7, path: cookiePath });
				$.fn.mtea.skipTo(window.location.href);
			});

			/*
			//不能这样
			$.ajax({
				type: "get",
				url: "/jcaptcha.jpg"
			});
			*/
		});
	</script>