前提：Ajax本身就为前后端交互服务的,实现功能：用户输入信息，实时判断用户的情况，这也是现在登录界面普遍流行的做法。前端js通过注释识别Controller层，该层查询返回，和之前Google验证码有点像。
学习教程：http://how2j.cn/
菜鸟教程
Ajax的jar包下载：https://files.cnblogs.com/files/meditation5201314/ajax.rar
Html也要引入css与js
<link rel="stylesheet" href="${pwd}/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="${pwd}/bootstrap/bootstrapValidator.min.css">
<script src="${pwd}/bootstrap/jquery-1.10.2.min.js"></script>
<script src="${pwd}/bootstrap/bootstrap.min.js"></script>
<script src="${pwd}/bootstrap/bootstrapValidator.min.js"></script>
然后检查标签用div包起来即可
<div class="form-group">
<input type="text" id ="username" name="username"
autofocus="autofocus">
</div>
上面都有讲解,
前端Ajax代码
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields: {
loginname: {
message:'账号验证失败',
validators: {
remote: {
url: '${ctx}/checkUserExist.do',
message: '该账号已存在，请重新输入',
delay: 500,
type: 'POST'
},
notEmpty: {
message: '账号不能为空'
},
threshold:6,
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '账号只能包含字母数字下划线'
}
}
},
username: {
message:'用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 15,
message: '用户名长度在6~15位之间'
},
threshold:6,
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用户名只能包含字母数字下划线'
}
}
},
password: {
message:'密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 15,
message: '密码长度在6~12位之间'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '密码只能包含字母数字下划线'
}
}
},
rpassword: {
message:'确认密码验证失败',
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: {
field: 'password',
message: '两次输入密码不一致'
}
}
}
}
});
});
</script>
分析：form表单为需要提交的表单，loginname里面的url为 Controller层里面的注释，这也是SSM的特性之一。其余的password,username的检查只需要在form表单下<input name ="所给的属性">，然后就可以进行检查。
Controller层：可以看到，该注释和上述的url一样即可，只检查登录名是否重复，一般为了双重保险，后台数据库设计的时候也可以将loginname设置成unique。
@RequestMapping("/checkUserExist.do")
@ResponseBody
public String checkUserExist(String loginname) {
boolean flag = false;
String stringJson = null;
int count = hrmService.findUserByLoginname(loginname);
if(count == 0) { flag = true; }
Map<String, Boolean> map = new HashMap<String, Boolean>();
map.put("valid", flag);
ObjectMapper mapper = new ObjectMapper();
ObjectMapper objectMapper = new ObjectMapper();
try {
stringJson = objectMapper.writeValueAsString(map);
} catch (Exception e) { e.printStackTrace(); }
return stringJson;
}
到此，基本的登录ajax登录检查功能就弄完了。
拓展： 今天学了一个新东西。就是ssm刚加载主界面的时候，文章是如何被加载出来的。之前是直接拦截用户进入后台，所以用户需要向后台发送请求，但是现在博客平台一开始就需要向后台发送请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 立即请求/desk -->
<jsp:forward page="res/index"/>
之前是index.jsp直接跳到所要界面，但是刚加载的时候就需要SSM的注释功能：res/index这里也是对应Controller层中的注释，然后Controller层处理， return "想要的界面",这里也算自己对SSM框架不太了解的原因吧。QAQ，好好学习，天天向上。。
