Ajax异步校验用户名是否存在

前端页面

// 核心JS代码
<script type="text/javascript">
	$(function() {
		// 给输入框添加失去焦点事件（可以使鼠标行为，也可以使Tab）
		$('#username').blur(function() {
			// 获取到输入框的内容
			var value = $(this).val();
			if (value == "") { // 输入框为空
				$('#hint').text('*用户名为空');
			} else { // 输入框不为空，数据提交到服务器进行校验
				$.post('${pageContext.request.contextPath}/user?method=checkUsername', 
						{'username': value}, 
						function(data) {
							if (data.checkUsername == 0) {
								$('#hint').text('*用户名不存在');
							} else if (data.checkUsername == -1) {
								$('#hint').text('*用户未激活');
							} else {
								$('#hint').text('');
							}
						}, 
						'json'
				)
			}
		})
	})
</script>

// 用户输入框
<input type="text" name="username" class="form-control" id="username" placeholder="请输入用户名" value="">

在这里约定 checkUsername == 1 表示用户存在，checkUsername == 0 表示用户不存在，checkUsername == -1 表示用户未激活。其中 ${pageContext.request.contextPath} 表示当前项目根路径。

后台

public String checkUsername(HttpServletRequest request, HttpServletResponse response) throws IOException {
	// 设置响应类型及编码
	response.setContentType("text/html;charset=utf-8");
	// 获取请求参数
	String username = request.getParameter("username");
	// 调用service层进行处理
	int i = userService.checkUsername(username);
	response.getWriter().write("{\"checkUsername\": \"" + i + "\"}");
	return null;
}

后台调用 service 层进行处理即可，把service层处理的结果返回。

注意：

1_ 如果 $.post() 使用的 dataType 是 json 的话，后台响应过来的 json 类型要严格按照 json 的格式，比如说 {"username": "张三"}，统一都是双引号，加双引号的话，可能前端回调函数不会执行（天坑呀）。