|
本篇文章主要说的是验证码的校验，使用到的有前台jsp页面+jQuery+Ajax+Servlet。
代码中都有较详细的注释，这里要交代的有两点： 1、将Ajax改为同步执行：
Ajax代码中如果没有async:false,这一句，验证功能也能实现，之所以加上这一句是登录时的功能需要。当点击“登录”按钮时，需判断用户名、密码、验证码是否全部正确，而Ajax是异步执行的，点击登录时不能够获取到Ajax的返回值，所以调用checkCode()方法不能正确判断验证码填写是否正确。所以将Ajax改为同步执行，可获取到返回值。
2、验证码：
验证码的标签为![]() 标签，但是src的值为"code"，其对应的是一个Servlet，该Servlet的作用就是生成一个验证码图片。有兴趣的可在另外一篇博客上看到。
效果图：
jsp页面代码：
验证码：
*
jQuery+Ajax代码：
/**
* 检查验证码
*/
function checkCode() {
var check = false;
$.ajax( {
type : "post",//请求方式
url : "checkCode",//发送请求地址
async : false,
dataType: "html",
data : {//发送数据
validate : $('[name=validate]').val()
},
//请求成功后的回调函数有两个参数
success : function(data,textStatus) {
if(data=='0') {
$("#checkCode").html("验证码错误！");
} else {
$("#checkCode").html("正确！");
check = true;
}
}
});
return check;
}
Servlet代码：
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class CheckCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
String code=request.getParameter("validate");
PrintWriter out = response.getWriter();
if (!code.equalsIgnoreCase(request.getSession().getAttribute("code").toString())) {
out.print(0);
} else {
out.print(1);
}
out.flush();
out.close();
}
}
web.xml配置代码：
CheckCodeServlet
servlet.CheckCodeServlet
CheckCodeServlet
/checkCode
|