JSON数据交互接收请求数据响应数据入门案例

最新推荐文章于 2023-07-09 11:51:37 发布

舰圣

最新推荐文章于 2023-07-09 11:51:37 发布

阅读量267

点赞数

文章标签： java ajax spring

本文链接：https://blog.csdn.net/weixin_44915822/article/details/120752200

版权

JSON数据交互接收请求数据响应数据入门案例

1 概述

@RequestBody：将json、xml 等内容转换成Java对象。

@ResponseBody：将Java对象转换成 json、xml等内容。

2 前端发送ajax请求，都断获取json数据

【前端发送ajax请求，后端通过VO自动获取数据打印】

前端代码

  <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <script>
        $(function () {

            var url = "${pageContext.request.contextPath}/tJson.action";
            var params={
                "name":"zhangsan",
                "price":"123"
            }
            var callBack=function (rel) {
                //后端有返回结果 就会弹窗显示, 没有就不会弹窗
                alert(rel.name+" "+rel.price)
            }
            //发射
            $.post(url,params,callBack,"json")

        })
    </script>
</head>
<body>
  页面加载完毕就发射ajax 
</body>
</html>

后端代码

Qvo

 public class QVo {

    private String name;
    private Double price;
....空参/有参/get/set/toString
}

Controller

Controller
@RequestMapping("/tJson.action")
public String testJson(QVo qvo){
    //查看前端传递的json 自动转化的VO结果
    System.out.println(qvo);

    return "/book.jsp";//随便转发到一个页面,不影响测试结果.
}

3 后端给前端响应Json数据

需求:

跟上一个例子类似, 前端发送请求给后端, 后端接收数据后给前端再相应回一个json数据.

该例子中,需要直接把java对象通过SpringMvc自动转化成json数据. 需要使用两个东西完成.

导入Jackson-databind坐标
在方法的返回值上使用@ResponseBody注解.

Pom文件坐标

<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.9.7</version>
</dependency>

Controller

@RequestMapping("tj.action")
public @ResponseBody QVo getInfo(String name,Double price){

    System.out.println("接收到前端数据:"+name+" "+price);

    //创建一个对象, 通过SpringMvc自动把这个对象转化成Json响应给前端
    QVo qVo = new QVo("lisiguang", 220.4);
    return qVo;
}

[@ResponseBody   需要添加这个注解，才会自动转化成json]

前端

<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script>
    $(function () {

        var url = "${pageContext.request.contextPath}/tj.action";
        var params={
            "name":"zhangsan",
            "price":"123"
        }
        var callBack=function (rel) {
            //后端有返回结果 就会弹窗显示, 没有就不会弹窗
            alert(rel.name+" "+rel.price)
        }
        //发射
        $.post(url,params,callBack,"json")

    })
</script>

测试结果

后端在这里插入图片描述

前端
在这里插入图片描述

舰圣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON数据交互接收请求数据响应数据入门案例

JSON数据交互接收请求数据响应数据入门案例1 概述@RequestBody：将json、xml 等内容转换成Java对象。@ResponseBody：将Java对象转换成 json、xml等内容。2 前端发送ajax请求，都断获取json数据【前端发送ajax请求，后端通过VO自动获取数据打印】前端代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %><html><h
复制链接

扫一扫