Maven(六):Kaptcha的简单小例(二)


接上一篇: http://my.oschina.net/gently/blog/631765 (Kaptcha的简单小例(一))

6. JsonModel.java:

public class JsonModel<T> implements Serializable {

	private static final long serialVersionUID = -6458566350260992814L;

	private Integer code;
	private String msg;
	private T t;
	
	
	public Integer getCode() {
		return code;
	}
	public void setCode(Integer code) {
		this.code = code;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public T getT() {
		return t;
	}
	public void setT(T t) {
		this.t = t;
	}
		
}


7. UserLoginAction.java:

public class UserLoginAction extends ActionSupport implements ModelDriven<UserLogin>,ServletRequestAware {
	
	private static final long serialVersionUID = 1L;
	
	private UserLogin userLogin;
	private HttpServletRequest request;
	private JsonModel<UserLogin> jsonModel;

	@Override
	public String execute() throws Exception {
		System.out.println( "开始执行execute() 方法  .... " );
		String kaptchaServer = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		String kaptchaClient = request.getParameter("checkCode");
		jsonModel = new JsonModel<UserLogin>();
		userLogin.setAckCode(kaptchaServer); 
		if (kaptchaServer.equals(kaptchaClient)){
			jsonModel.setCode(1);
		}else{
			jsonModel.setCode(2);
			jsonModel.setMsg("验证码错误。");
		}
		jsonModel.setT(userLogin);
		return "success";
	}

	public void setJsonModel(JsonModel<UserLogin> jsonModel){
		this.jsonModel=jsonModel;
	}
	
	public JsonModel<UserLogin> getJsonModel() {
		return jsonModel;
	}
	
	public UserLogin getModel() {
		userLogin = new UserLogin();
		return userLogin;
	}
	
	public void setServletRequest(HttpServletRequest request) {
		this.request = request;
	}
}

  这里要注意是 :

        

  那么找 。。 找 。。 找找找  。 在web.xml中有这样一段参数配置 : 

最后是jsp页面:

8. index.jsp: 

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>kaptcha生成验证码</title>

	<script src="js/jquery-1.11.3.min.js"></script>
	
</head>
<body>
	<div style="text-align: center;">
	
		<h2>Kaptcha 生成验证码图片</h2>
		
		<form id="myform" name="myform" action="checkCode.jsp" method="post" >
			姓    名:<input type="text" id="uname" name="uname" /><br/><br/>
			密    码:<input type="text" id="pwd" name="pwd" /><br/><br/>
			验证码:<input type="text" id="checkCode" name="checkCode" /><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;
				 <img alt="random" src="randomcode.jpg" onclick="changeR(this)" style="cursor: pointer;">
				 <dd>点击图片更换</dd><br/>&nbsp;&nbsp;
			<input id="button" value=" Login " type="button" onclick="goSubmit()"/>  <br/>
		</form>
		<br/><hr/>
		<div id="result"></div>
	</div>
</body>

<script type="text/javascript">

	//更换验证码图片
	function changeR(node) {
		// 用于点击时产生不同的验证码
		node.src = "randomcode.jpg?time=" + new Date().getTime();
	}
	
	//提交信息
	function goSubmit(){
		$("#result").html(" ");
		var uname = $("#uname").val();
		var pwd = $("#pwd").val();
		var checkCode = $("#checkCode").val();
		alert( uname + "  "  + pwd +"  " +  checkCode  );
		$.ajax({
			type:"POST",
			url: "userLoginAction", 
			data: {"uname":uname,"pwd":pwd,"checkCode":checkCode},
			dataType:"JSON",
			success:function( data ){
				if(data.code==1){
					$("#result").append(
					"登录成功,姓名: "+data.t.uname+" ,密码: "+data.t.pwd + " ,验证码输入: "+ data.t.checkCode + " ,验证码确认: " +data.t.ackCode )
				}else{
					$("#result").append("</span>\tkaptchaClient===> <span style='color:red;'>" +data.msg + "</span></h4>")
				}
			}
		});
	}
	
</script>
</html>

    

    9. 运行页面结果:

     1. 验证码正确:

        

     2. 验证码错误:

            Maven(六):Kaptcha的简单小例(二)_第1张图片


    

            

你可能感兴趣的:(Maven(六):Kaptcha的简单小例(二))