SSM框架前后端信息交互

Posted 2020-12-16 huskysir

一、从前端向后端传送数据

常见的3种方式

1、form表单的action：此方法可以提交form表单内的输入数据，也可同时提交某些隐藏但设置有默认值的<input>，如修改问题时，我们除了提交问题的相关信息，还需要将用户的编号提交给后端，此时就可以设置一个默认值为用户编号的<input>,并将其隐藏

2、<a>标签的href属性：此方法一般用来提交一些较少的数据，比如对象编号

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 ......

此时可以通过${}直接取得后端传来的数据

2、ModelAndView

该方法与Model相比，多增加了返回的视图（View），对于返回给前端的具体数据处理类似