SSM-網站後臺管理系統制作(4)---Ajax前後端互動
阿新 • • 發佈:2019-01-07
前提: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,好好學習,天天向上。。