使用版本为play 1.2.5根据官方的例子
首先我们生成一个UUID传到register页面上去
public static void register(){
String randomID = Codec.UUID();
render("/UserControl/register.html",randomID);
}
然后我们定义一个通过UUID生成验证码的方法
public static void captcha(String id) {
Images.Captcha captcha = Images.captcha();
String code = captcha.getText("#E4EAFD");设置验证码颜色
Cache.set(id, code, "10mn");//缓存在服务端
renderBinary(captcha);渲染图像
}
在register.html我们定义
<img src="@{UserControl.captcha(randomID)}" style="margin-left: 100px" id="code"><input type="hidden" name="randomID" value="${randomID}" id="hiddenCode"/>
img标签通过传过来的UUID渲染验证码图像,input把传过来的UUID再传回服务器,然后服务器可以验证
validation.equals(
validate, Cache.get(randomID)
).message("Invalid code. Please type it again");
if(validation.hasErrors()) {
flash.put("info", "validate error");
userlogin();
}
上面我们对传来的数据做验证validate为页面验证码框传来的字符串,Cache.get(randID)为input hidden传来的UUID取得的数据,如果验证出错,就调用userLogin()跳到其他页面
下面介绍更换验证码的方法
public static void changeCode(String randomID){
Cache.delete(randomID);
String ID = Codec.UUID();
WebServiceBean bean = new WebServiceBean();
bean.result = 0;
bean.data = ID;
renderJSON(bean);
}
我们定义一个方法,接受页面传来的验证码UUID,然后在服务端删除它,然后新建一个UUID,返回给请求
然后页面ajax这样处理
$("#changeCode").click(function(event) {
/* Act on the event */
event.preventDefault();
$.ajax({
url: url+'UserControl/changeCode',
data: {randomID: '${randomID}'},
})
.done(function(data) {
$("#code").attr('src', url+'UserControl/captcha?id='+data.data);
$("#hiddenCode").val(data.data);
//console.log(data);
})
.fail(function(data) {
console.log('error');
})
});
ajax把页面的uuid传给后台的changeCode方法,然后根据返回来的新的UUID更新img的src和input hidden的value