Maven（六）：Kaptcha的簡單小例（二）

時間 2019-12-04

原文原文鏈接

接上一篇： http://my.oschina.net/gently/blog/631765 （Kaptcha的簡單小例（一））javascript

6. JsonModel.java:html

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: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;
	}
}

這裏要注意是：node

那麼找。。找。。找找找。在web.xml中有這樣一段參數配置： jquery

最後是jsp頁面：web

8. index.jsp: ajax

<%@ 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. 運行頁面結果：
json

1. 驗證碼正確：
app

2. 驗證碼錯誤：
dom