前端页面
// 核心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": "张三"},统一都是双引号,加双引号的话,可能前端回调函数不会执行(天坑呀)。