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代码

　　　　

 </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，好好学习，天天向上。。

HTTPS://files.cn blog上.com/files/meditation5201314/Ajax.rar

[HTTPS://Files.Cn blog shàng.Com/files/meditation5201314/Ajax.Rar]

.com / files / meditation5201314 / Ajax.rar on HTTPS://files.cn blog