ajax配合ssm框架 SSM框架前后端信息交互实现流程详解

SSM框架前后端信息交互实现流程详解

比如该处代码，显示了问题的标题信息，并将其作为超链接，点击该链接时进入后端Controller类的方法，并向其发送问题编号question_id

3、ajax请求：此方法一般在不需要页面跳转时采用，可以局部刷新页面，比如向后端提交关注某用户的信息，后端收到ajax的请求数据，对数据库进行操作，并通过@Response注解返回信息给前端，然后前端进行相关操作，可以不进行页面跳转

前端部分代码

......

function SaveUserFollowUser(){

var login_user_id = ${login_user_id} //登录者(发起者)编号

var user_id = ${user.user_id}; //接受者用户编号

$.ajax({

url:"/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("您已经关注该用户，不可重复关注")

}

}

});

}

......

关注用户

......

后端Controller类

/**

* 表现层 用户关系相关 (关注用户、被用户关注、关注问题、赞同回答)

*/

@Controller

@RequestMapping("/UserRelation")

public class UserRelationController {

......

/**

* 新增某用户关注某用户

* @param map

* @return

*/

@RequestMapping(value = "/SaveUserFollowUser",method = {RequestMethod.POST})

public @ResponseBody Boolean SaveUserFollowUser(@RequestBody Map 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";

}

......

}

前端部分代码

......

用户名:${user.user_name}

用户昵称:${user.user_nickname}

用户性别:${user.user_sex}

用户邮箱:${user.user_email}

用户密码:${user.user_password}

......

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

2、ModelAndView

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

SSM框架前后端信息交互实现流程详解相关教程