前端页面:
<!--验证码输入框 -->
<input type="text" class="entry" value="" placeholder="请输入短信验证码" id="u_code" autocomplete="off">
<!--获取验证码的按钮 -->
<input type="button" id="smsBtn" class="obtain" value="获取验证码" onclick="getRandNum(this);">
<!-- 服务器返回的验证码隐藏域 -->
<input type="hidden" name="randNum" id="randNum" value="" /><a class="land" onclick="safeLogin()">确认登陆</a>
JS发送AJAX请求发送验证码:
获取到服务器响应后更新页面的隐藏域,在用户提交表单的时候可以此判断验证码是否输入正确。
<script>
var wait=0; function getRandNum(){
var photo = "${safePhone }";
var auId = "${auId }" ;
//alert(photo);
var xmlHttp = null;
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
alert("验证码发送成功,请注意查收");
document.getElementById("randNum").value=xmlHttp.responseText;
wait=60;
var smsBtn = document.getElementById("smsBtn");
time(smsBtn);
}
}
xmlHttp.open("GET","${basePath }login/sendSmsCode.action?phone="+photo+"&auId="+auId,true);
xmlHttp.send(); } //计时
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
//o.setAttribute("disabled", false);
o.value="获取验证码";
wait = 60;
document.getElementById("randNum").value="";
} else {
o.setAttribute("disabled", true);
o.value="已发(" + wait + "s)";
wait--;
setTimeout(function() {time(o)},1000);
}
} function safeLogin(){
var u_code = document.getElementById("u_code").value;
var s_code = document.getElementById("randNum").value;
//alert(u_code);
if(u_code==""){
alert("验证码不能为空!");
return false ;
}
if(u_code!=s_code){
alert("验证码输入不正确,请输入正确验证码!");
return false ;
} var safeLoginFrm = document.getElementById("safeLoginFrm");
safeLoginFrm.submit();
} </script>
服务器端ACTION:
/*
* 发送短信验证码
*/
public void sendSmsCode() {
HttpServletResponse response = ServletActionContext.getResponse(); // 产生6位随机数字
Random r = new Random();
String randNum = "";
for (int i = 0; i < 6; i++) {
randNum += r.nextInt(10);
}
String content = "【验证码】" + randNum + "(后台安全登陆验证码,一分钟内有效)";
// 发送短信begin:
Map<String, String> sendMap = SendSmsMessage
.sendMessage(content, phone);
Integer sms_code = Integer.parseInt(sendMap.get("Code"));
String sms_result = sendMap.get("Result");
// 发送短信end try {
PrintWriter writer = response.getWriter();
writer.print(randNum);
writer.flush();
writer.close();
} catch (Exception e) {
e.printStackTrace();
} }
上面简单实现了验证码功能,也算是一个AJAX的一个实例。