SSM框架前后端信息交互实现流程详解
作者:HuskySir
这篇文章主要介绍了SSM框架前后端信息交互实现流程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
一、从前端向后端传送数据
常见的3种方式
1、form表单的action:此方法可以提交form表单内的输入数据,也可同时提交某些隐藏但设置有默认值的<input>,如修改问题时,我们除了提交问题的相关信息,还需要将用户的编号提交给后端,此时就可以设置一个默认值为用户编号的<input>,并将其隐藏
2、<a>标签的href属性:此方法一般用来提交一些较少的数据,比如对象编号
1 <a href="<%=path%>/Question/DisplayQuestionInfo?question_id=${question.question_id}" rel="external nofollow" >${question.question_title}</a>
比如该处代码,显示了问题的标题信息,并将其作为超链接,点击该链接时进入后端Controller类的方法,并向其发送问题编号question_id
3、ajax请求:此方法一般在不需要页面跳转时采用,可以局部刷新页面,比如向后端提交关注某用户的信息,后端收到ajax的请求数据,对数据库进行操作,并通过@Response注解返回信息给前端,然后前端进行相关操作,可以不进行页面跳转
前端部分代码
<script language="JavaScript"> ...... function SaveUserFollowUser(){ var login_user_id = ${login_user_id} //登录者(发起者)编号 var user_id = ${user.user_id}; //接受者用户编号 $.ajax({ url:"<%=path%>/UserRelation/SaveUserFollowUser", type:"POST", async: false, contentType:"application/json;charset=UTF-8", dataType:'json', data:JSON.stringify({"from_user_id":login_user_id,"to_user_id":user_id}), //JSON对象转为字符串 success:function(data){ /* 可在后端增加判断发起者和接受者用户是否是同一用户的判断 */ if (data == true) { alert("关注成功"); } else { alert("您已经关注该用户,不可重复关注") } } }); } </script> ...... <button class="btn btn-success" style="width: 100px" onclick="SaveUserFollowUser()">关注用户</button> ......
后端Controller类
/** * 表现层 用户关系相关 (关注用户、被用户关注、关注问题、赞同回答) */ @Controller @RequestMapping("/UserRelation") public class UserRelationController { ...... /** * 新增某用户关注某用户 * @param map * @return */ @RequestMapping(value = "/SaveUserFollowUser",method = {RequestMethod.POST}) public @ResponseBody Boolean SaveUserFollowUser(@RequestBody Map<String,String> map) { //关注发出者编号 Integer from_user_id = Integer.parseInt(map.get("from_user_id")); //关注接受者编号 Integer to_user_id = Integer.parseInt(map.get("to_user_id")); //是否新增成功 //该项可以增加发起者用户和接受者用户是否是同一用户的判断,即比较from_user_id与to_user_id是否相等,如果相等则关注失败 //通过返回Integer类型而非Boolean类型的做判断 本程序并未增加这项判断 Boolean flag = userRelationService.saveUserFollowUser(from_user_id,to_user_id); return flag; } ...... }
二、从后端向前端传送数据
1、Model
后端部分代码
/** * 表现层 用户 */ @Controller @RequestMapping(value = "/User") public class UserController { ...... /** * 进入个人信息页面 * @param httpSession * @param model * @return */ @RequestMapping(value = "/DisplayMyInfo") public String DisplayMyInfo(HttpSession httpSession, Model model) { Integer user_id = (Integer) httpSession.getAttribute("login_user_id"); //登录者个人编号 User user = userService.findUserById(user_id); //登录者个人信息 model.addAttribute("user",user); //将登录者个人信息返回给前端 return "User/myInfo"; } ...... }
前端部分代码
...... <div class="col-md-6 col-md-offset-5" style="text-align: left;"> <h2>用户名:${user.user_name}</h2> <h2>用户昵称:${user.user_nickname}</h2> <h2>用户性别:${user.user_sex}</h2> <h2>用户邮箱:${user.user_email}</h2> <h2>用户密码:${user.user_password}</h2> </div> ......
此时可以通过${}直接取得后端传来的数据
2、ModelAndView
该方法与Model相比,多增加了返回的视图(View),对于返回给前端的具体数据处理类似
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。