SSM框架实现前后端信息交互的实现代码详情

发布时间:2020-07-17 17:46:34 作者:小猪
来源:亿速云 阅读:407

这篇文章主要讲解了SSM框架实现前后端信息交互的实现代码详情,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

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

常见的3种方式

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

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

1 <a href="<%=path%>/Question/DisplayQuestionInfo&#63;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"  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" >
        <h3>用户名:${user.user_name}</h3>
        <h3>用户昵称:${user.user_nickname}</h3>
        <h3>用户性别:${user.user_sex}</h3>
        <h3>用户邮箱:${user.user_email}</h3>
        <h3>用户密码:${user.user_password}</h3>
      </div>
......

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

2、ModelAndView

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

看完上述内容,是不是对SSM框架实现前后端信息交互的实现代码详情有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Web如何实现前后端交互
  2. json前后端数据交互相关代码

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ssm 实现代码

上一篇:跨平台的.NET邮件协议MailKit组件解析

下一篇:Xcode最好用的日志打印方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》