分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

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

发布时间:2023-09-06 02:29责任编辑:熊小新关键词:后端Ajax

  前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法。前端js通过注释识别Controller层,该层查询返回,和之前Google验证码有点像。

  学习教程:http://how2j.cn/

       菜鸟教程

  上面都有讲解,

  前端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,好好学习,天天向上。。

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

原文地址:https://www.cnblogs.com/meditation5201314/p/10234962.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved