Servlet+jQuery+AJAX+json实现用户注册异步校验
1.创建一个项目，在webcontent目录下创建一个js文件夹，将jQuery的js文件放进去。
2.1 regist.jsp-$.ajax()方法
<script type="text/javascript" src="js/jquery-2.2.4.min.js" ></script>
<script type="text/javascript">
$(function(){
$("#username").blur(function(){
$.ajax({
type:"post",//请求方式
url:"${pageContext.request.contextPath}/UserServlet",//发送请求的地址
async:"true",//异步
data:{//发送到服务器的数据
"username":$("#username").val()
},
dataType:"json",//服务器返回的数据类型
success:function(data){//请求完成后调用的回调函数，不管成功或失败。
if(data.res==1){
$("#erro").text("该用户已存在");
}else{
$("#erro").text("该用户可用");
}
}
})
})
//获得焦点的时候清除信息
$("#username").focus(function(){
$("#erro").text("");
});
})
</script>
</head>
<body>
<form action="">
用户名：<input type="text" id="username" /><span id="erro"></span><br/>
</form>
</body>
2.2 regist.jsp-$.post()方法
<script type="text/javascript">
$(function(){
$("#username").blur(function(){
$.post("${pageContext.request.contextPath}/UserServlet",//请求发送的地址
{username:$("#username").val()},//发送的数据
function(data){//发送成功时回调函数
if(data.res==1){
$("#erro").text("该用户已存在");
}
},"json");
});
//获得焦点的时候清除信息
$("#username").focus(function(){
$("#erro").text("");
});
})
</script>
3.创建一个Servlet，里面对jsp传过来的数据进行处理。
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
//开发中应该通过传过来的username在数据库中查找是否存在这个用户，这里做简单的判断，显示效果。
if(username.equals("aaa")){
response.getWriter().write("{\"res\":1}");//返回一个json数据
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
测试
异步校验成功！
源码下载地址：https://files.cnblogs.com/files/dj-blog/registTest.zip
