首页 > 编程语言 > 详细

SprimgMVC学习笔记(八)—— SpringMVC与前台json数据交互

时间:2019-01-03 16:04:37      阅读:213      评论:0      收藏:0      [点我收藏+]

一、两种交互形式


技术分享图片

  可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析,但是在Controller类中返回的json格式的数据都是一样的。下面来具体分析一下SpringMVC是如何与前台进行json数据的交互的。在讲之前先认识两个注解。

1.1 @RequestBody

  作用:@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内容(json数据)转换为java对象并绑定到Controller方法的参数上。

  传统的请求参数:itemEdit.action?id=1&name=zhangsan&age=12

  现在的请求参数:使用POST请求,在请求体里面加入json数据

{
  "id": 1,
  "name": "电冰箱",
  "price": 1999
}

  本例子应用:@RequestBody注解实现接收http请求的json数据,将json数据转换为java对象进行绑定。如下:

技术分享图片

技术分享图片

1.2 @ResponseBody

  作用:@ResponseBody注解用于将Controller的方法返回的对象,通过springmvc提供的HttpMessageConverter接口转换为指定格式的数据如:json,xml等,通过Response响应给客户端。

  本例子应用:@ResponseBody注解实现将Controller方法返回java对象转换为json响应给客户端。如下:

  技术分享图片

  技术分享图片

二、实现请求json,响应json

2.1 加入jar包

  如果需要springMVC支持json,必须加入json的处理jar,我们使用Jackson这个jar,如下图:

  技术分享图片

2.2 修改前台jsp页面

  在itemList.jsp页面中添加js测试代码:

<button onclick="sendJson()">json数据交互测试</button>
<script type="text/javascript">
    function sendJson(){
        
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath }/testJson.action",
            data:{"id":"1","name":"电冰箱","price":"1999"},
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success:function(data) {
                alert(data.id + ":" + data.name);
            }
        });
    }
</script>

  注意不要忘了导入jQuery的类库,因为我是使用jQuery的ajax提交json串的,就像下图这样: 技术分享图片

2.3 编写ItemController

  /**
     * 测试json的交互
     * @param item
     * @return
     */
    @RequestMapping("testJson")
    @ResponseBody
    public Item testJson(@RequestBody Item item){
        
        return item;
    }

2.4 测试

  由于前台传的是id、name和price三个属性,所以在后台就用Items类来接收了,这个类中也有这三个属性。重点是@RequestBody注解,它是将前台传过来的json串转换成items对象,然后再将该对象return回去,通过@ResponseBody注解将items对象转成json格式返回给前台。这样前台接收到了后就可以解析了。我们看一下测试的结果:

  技术分享图片

  响应的结果,null表示空值而已,这里就返回了原对象,也就只有id、name和price属性。 

  技术分享图片

 

 

参考博文:https://blog.csdn.net/yerenyuan_pku/article/details/72514022

 

SprimgMVC学习笔记(八)—— SpringMVC与前台json数据交互

原文:https://www.cnblogs.com/yft-javaNotes/p/10214657.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!