SSM-网站后台管理系统制作---Ajax前后端交互

Posted Empirefree

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SSM-网站后台管理系统制作---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,好好学习,天天向上。。

 

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

以上是关于SSM-网站后台管理系统制作---Ajax前后端交互的主要内容,如果未能解决你的问题,请参考以下文章

SSM-网站后台管理系统制作

基于SSM框架下的JAVA网站后台管理平台

前后端交常用的方式

059基于SSM酒店管理系统(前后台)

用PHP和Ajax进行前后台数据交互——以用户登录为例

java企业站源码 响应式 兼容手机平板PC 主流SSM 框架 freemaker 静态引擎