SSM框架用JSON进行前后端数据传输

Posted 2020-10-05 嘚吧嘚吧嘚

 

一个根据用户id查找用户信息的简单功能，使用JSON进行数据的传输

前端代码

这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果，ajax进行前端的数据传输（class内容可以无视，只有美化效果）：

<form class="form-horizontal" >
    <label for="firstname" class="col-sm-2 control-label">用户ID</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="user_id" placeholder="请输入用户ID">
    </div>
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" id="select" class="btn btn-default">查找</button>
    </div>

</form>
<div class="panel-body">
    <h2 class="text-danger text-center">
        <!-- 用来显示查找结果 -->
        <span class="glyphicon" id="select-box"></span>
    </h2>
</div>
$(function(){
$("#select").click(function() {
            $.ajax({
                url : "peopleSelect",
                type : "POST",
                dataType:"json",
                contentType : "application/json;charset=UTF-8",
                <!-- 向后端传输的数据 -->
                data : JSON.stringify({
                    id : $("#user_id").val(),
                }),
                success:function(result) {
                    <!-- 处理后端返回的数据 -->
                    var message= JSON.stringify(result);
                    $("#select-box").html("查询成功" + message);
                },
                error:function(result){
                    $("#select-box").html("查询失败");
                }
            });
        });
});

后端代码

Controller

这里主要用@RequestBody转换接受的JSON为对象，用@ResponseBody转换返回的对象为JSON。 
有两种接受前端数据的方式，一种使用Map接受，一种使用实体类进行接收，使用Map接受的方法为：

@RequestMapping("/peopleSelect")
    @ResponseBody
    public People peopleSelect(@RequestBody Map<String,String> map) {
        //使用map.get方法得到JSON中id对应的值
        long id = Long.parseLong(map.get("id"));
        //查找对应id的用户信息
        People people = peopleService.getById(id);
        //返回用户信息，要使用@ResponseBody将返回值转换为JSON
        return people;
    }

使用实体类接受的话，要求实体类中有对应的属性，如People中有id,name,age属性，只能接受键名为id,name,age的JSON（可以不全有，但不能有People中没有的属性），方法为：

@RequestMapping("/peopleSelect")
    @ResponseBody
    public People peopleSelect(@RequestBody People requestPeople ) {
        //使用requestPeople.getId方法得到JSON中id对应的值
        long id = requestPeople.getId();
        //查找对应id的用户信息
        People people = peopleService.getById(id);
        //返回用户信息，要使用@ResponseBody将返回值转换为JSON
        return people;
    }

最后说几个遇到的问题：

一.点击查找按钮后，页面会快速刷新，看不到返回结果

提交按钮的type一定要设置为button，不要使用submit，因为submit会默认点击提交，而ajax也会提交，这就产生了ajax的返回结果还没看清就因为submit的提交而刷新了页面。

二.后台查询结果没问题，却总是调用ajax的error回调函数

ajax对返回数据的要求很严格，一定要是严格的JSON数据返回才会进行success的回调，只要有一条数据不是严格的JSON格式就会调用error的回调函数，最好将查询结果封装为一个类，每次查询返回这个类，类中包含查询结果或者错误信息。