SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提：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代码
1 </script> 2 3 <script language="javascript" type="text/javascript"> 4 $(function(){ 5 $(\'form\').bootstrapValidator({ 6 message: \'This value is not valid\', 7 feedbackIcons: { 8 valid:\'glyphicon glyphicon-ok\', 9 invalid:\'glyphicon glyphicon-remove\', 10 validating:\'glyphicon glyphicon-refresh\' 11 }, 12 fields: { 13 loginname: { 14 message:\'账号验证失败\', 15 validators: { 16 remote: { 17 url: \'${ctx}/checkUserExist.do\', 18 message: \'该账号已存在，请重新输入\', 19 delay: 500, 20 type: \'POST\' 21 }, 22 notEmpty: { 23 message: \'账号不能为空\' 24 }, 25 threshold:6, 26 regexp: { 27 regexp: /^[a-zA-Z0-9_]+$/, 28 message: \'账号只能包含字母数字下划线\' 29 } 30 } 31 }, 32 33 username: { 34 message:\'用户名验证失败\', 35 validators: { 36 notEmpty: { 37 message: \'用户名不能为空\' 38 }, 39 stringLength: { 40 min: 6, 41 max: 15, 42 message: \'用户名长度在6~15位之间\' 43 }, 44 threshold:6, 45 regexp: { 46 regexp: /^[a-zA-Z0-9_]+$/, 47 message: \'用户名只能包含字母数字下划线\' 48 } 49 } 50 }, 51 password: { 52 message:\'密码验证失败\', 53 validators: { 54 notEmpty: { 55 message: \'密码不能为空\' 56 }, 57 stringLength: { 58 min: 6, 59 max: 15, 60 message: \'密码长度在6~12位之间\' 61 }, 62 regexp: { 63 regexp: /^[a-zA-Z0-9_]+$/, 64 message: \'密码只能包含字母数字下划线\' 65 } 66 } 67 }, 68 rpassword: { 69 message:\'确认密码验证失败\', 70 validators: { 71 notEmpty: { 72 message: \'确认密码不能为空\' 73 }, 74 identical: { 75 field: \'password\', 76 message: \'两次输入密码不一致\' 77 } 78 } 79 } 80 } 81 }); 82 83 }); 84 </script>
分析：form表单为需要提交的表单，loginname里面的url为 Controller层里面的注释，这也是SSM的特性之一。其余的password,username的检查只需要在form表单下<input name =”所给的属性”>，然后就可以进行检查。
Controller层：可以看到，该注释和上述的url一样即可，只检查登录名是否重复，一般为了双重保险，后台数据库设计的时候也可以将loginname设置成unique。
1 @RequestMapping("/checkUserExist.do") 2 @ResponseBody 3 public String checkUserExist(String loginname) { 4 boolean flag = false; 5 String stringJson = null; 6 7 int count = hrmService.findUserByLoginname(loginname); 8 if(count == 0) { flag = true; } 9 Map<String, Boolean> map = new HashMap<String, Boolean>(); 10 map.put("valid", flag); 11 ObjectMapper mapper = new ObjectMapper(); 12 13 ObjectMapper objectMapper = new ObjectMapper(); 14 try { 15 stringJson = objectMapper.writeValueAsString(map); 16 } catch (Exception e) { e.printStackTrace(); } 17 return stringJson; 18 }
到此，基本的登录ajax登录检查功能就弄完了。
拓展： 今天学了一个新东西。就是ssm刚加载主界面的时候，文章是如何被加载出来的。之前是直接拦截用户进入后台，所以用户需要向后台发送请求，但是现在博客平台一开始就需要向后台发送请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!-- 立即请求/desk --> 4 <jsp:forward page="res/index"/>
之前是index.jsp直接跳到所要界面，但是刚加载的时候就需要SSM的注释功能：res/index这里也是对应Controller层中的注释，然后Controller层处理， return “想要的界面”,这里也算自己对SSM框架不太了解的原因吧。QAQ，好好学习，天天向上。。