/**生成图片验证码controller里的方法。
* @throws JSONException */
@RequestMapping("/verifyCode/ImageCode")
@ResponseBody
public JSONObject produceImageCode(HttpSession session) throws IOException {
JSONObject jobj = new JSONObject();
ImageUtil iu = new ImageUtil();
String code = iu.createImageWithVerifyCode(120,30,4,session);
code = "data:image/png;base64,"+code;
jobj.put("png_base64",code);
//把验证码放到jobj里传到前端。
jobj.put("img_code", session.getAttribute("img_code"));
return jobj;
}
//后端传过来的验证码
var imgcode2;
$(function(){
imgChange();
});
function imgChange(){
$.ajax({
type: "POST",
dataType: "json",
url: "/verifyCode/ImageCode" ,
data:{},
success: function (result) {
$("#img").attr('src',result.png_base64);
//后端传过来的验证码
imgcode2 = result.img_code;
},
error : function() {
alert("操作发生异常,请刷新页面后再试!");
}
});
}
//判断验证码
function onblus(){
//获取输入的验证码
var imgcode = $('#img_code').val();
if(imgcode != ""){
if(imgcode.toLowerCase() != imgcode2.toLowerCase()){
layer.alert("验证码不正确");
}
}
}
参考博客:https://blog.csdn.net/qq_25652949/article/details/82900967