一、從前端向后端傳送數據
常見的3種方式
1、form表單的action：此方法可以提交form表單內的輸入數據，也可同時提交某些隱藏但設置有默認值的<input>，如修改問題時，我們除了提交問題的相關信息，還需要將用戶的編號提交給后端，此時就可以設置一個默認值為用戶編號的<input>,並將其隱藏
2、<a>
1 <a href="<%=path%>/Question/DisplayQuestionInfo?question_id=${question.question_id}">${question.question_title}</a>
比如該處代碼，顯示了問題的標題信息，並將其作為超鏈接，點擊該鏈接時進入后端Controller類的方法，並向其發送問題編號question_id
3、ajax請求：此方法一般在不需要頁面跳轉時采用，可以局部刷新頁面，比如向后端提交關注某用戶的信息，后端收到ajax的請求數據，對數據庫進行操作，並通過@Response注解返回信息給前端，然后前端進行相關操作，可以不進行頁面跳轉
1 <script language="JavaScript"> 2 ...... 3 function SaveUserFollowUser(){ 4 var login_user_id = ${login_user_id} //登錄者（發起者）編號 5 var user_id = ${user.user_id}; //接受者用戶編號 6 7 $.ajax({ 8 url:"<%=path%>/UserRelation/SaveUserFollowUser", 9 type:"POST", 10 async: false, 11 contentType:"application/json;charset=UTF-8", 12 dataType:'json', 13 14 data:JSON.stringify({"from_user_id":login_user_id,"to_user_id":user_id}), //JSON對象轉為字符串 15 success:function(data){ 16 /* 可在后端增加判斷發起者和接受者用戶是否是同一用戶的判斷 */ 17 if (data == true) { 18 alert("關注成功"); 19 } else { 20 alert("您已經關注該用戶，不可重復關注") 21 } 22 } 23 }); 24 } 25 </script> 26 27 ...... 28 <button class="btn btn-success" style="width: 100px" onclick="SaveUserFollowUser()">關注用戶</button> 29 ......
后端Controller類
1 /** 2 * 表現層 用戶關系相關 (關注用戶、被用戶關注、關注問題、贊同回答) 3 */ 4 @Controller 5 @RequestMapping("/UserRelation") 6 public class UserRelationController { 7 8 ...... 9 10 /** 11 * 新增某用戶關注某用戶 12 * @param map 13 * @return 14 */ 15 @RequestMapping(value = "/SaveUserFollowUser",method = {RequestMethod.POST}) 16 public @ResponseBody Boolean SaveUserFollowUser(@RequestBody Map<String,String> map) { 17 18 //關注發出者編號 19 Integer from_user_id = Integer.parseInt(map.get("from_user_id")); 20 //關注接受者編號 21 Integer to_user_id = Integer.parseInt(map.get("to_user_id")); 22 //是否新增成功 23 //該項可以增加發起者用戶和接受者用戶是否是同一用戶的判斷，即比較from_user_id與to_user_id是否相等，如果相等則關注失敗 24 //通過返回Integer類型而非Boolean類型的做判斷 本程序並未增加這項判斷 25 Boolean flag = userRelationService.saveUserFollowUser(from_user_id,to_user_id); 26 return flag; 27 } 28 29 ...... 30 31 }
二、從后端向前端傳送數據
1、Model
1 /** 2 * 表現層 用戶 3 */ 4 @Controller 5 @RequestMapping(value = "/User") 6 public class UserController { 7 8 ...... 9 10 /** 11 * 進入個人信息頁面 12 * @param httpSession 13 * @param model 14 * @return 15 */ 16 @RequestMapping(value = "/DisplayMyInfo") 17 public String DisplayMyInfo(HttpSession httpSession, Model model) { 18 Integer user_id = (Integer) httpSession.getAttribute("login_user_id"); //登錄者個人編號 19 User user = userService.findUserById(user_id); //登錄者個人信息 20 21 model.addAttribute("user",user); //將登錄者個人信息返回給前端 22 return "User/myInfo"; 23 } 24 25 ...... 26 27 }
前端部分代碼
1 ...... 2 <div class="col-md-6 col-md-offset-5" style="text-align: left;"> 3 <h2>用戶名:${user.user_name}</h2> 4 <h2>用戶昵稱:${user.user_nickname}</h2> 5 <h2>用戶性別:${user.user_sex}</h2> 6 <h2>用戶郵箱:${user.user_email}</h2> 7 <h2>用戶密碼:${user.user_password}</h2> 8 </div> 9 ......
此時可以通過${}直接取得后端傳來的數據
該方法與Model相比，多增加了返回的視圖（View），對於返回給前端的具體數據處理類似