使用ajax检查注册时用户名是否重复

1、首先在注册页面添加两个span标签，用于放用户名不重复时的 “用户名可用” 提示，和用户名重复时的 “用户名不可用” 提示，默认先隐藏（style=“display: none”）

<span id="span1" class="label label-success" style="display: none">用户名可用</span>
<span id="span2" class="label label-danger" style="display: none">用户名不可用</span>

2、编写ajax代码

1、获取注册时表单中填写的用户名

2、如果没有填写任何数据，此时为""，直接就return掉，结束请求；反之请求Servlet

3.编写ajax代码

<script>
$(function () {
	$("#username").blur(function () { //用户名框失去焦点时，发生下列事件
	
		//获取注册时表单中填写的用户名
		var username = $("#username").val();

		//如果username为“”，什么都不显示
		if (username.trim() == "") {
			$("#span1").hide();
			$("#span2").hide();
			return;
		}

		//根据传回来的数据判断是否显示
		$.post("${pageContext.request.contextPath}/UserRegisterServlet", {username:username}, function (data) {
			if (data == 1){ //如果返回1，说明用户名没有重复，提示“用户名可用”，“用户名不可用” 要隐藏；反之相反
				$("#span1").show();
				$("#span2").hide();
			}else{
				$("#span2").show();
				$("#span1").hide();
			}
		});
	})
})
</script>

3、Servlet响应代码

//设置请求时中文乱码
request.setCharacterEncoding("utf-8");
//接收参数
String username = request.getParameter("username");
//依赖service层
UserService us = new UserService();
int i = 0;
try {
    i = us.checkUserName(username);
} catch (SQLException e) {
    e.printStackTrace();
}

//做出ajax响应
response.getWriter().print(i);