5.学习springmvc响应json数据

久未见 提交于 2020-04-06 08:46:17

一.配置不过滤静态资源文件:用来访问webapp中js,css,images文件

1.修改springmvc.xml

1     <!--配置前端控制器,用于设置哪些资源不拦截-->
2     <mvc:resources location="/css/" mapping="/css/**"/> <!-- 样式 -->
3     <mvc:resources location="/images/" mapping="/images/**"/> <!-- 图片 -->
4     <mvc:resources location="/js/" mapping="/js/**"/> <!-- javascript -->

2.jsp:

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 
 3 <html>
 4 <head>
 5     <title>response</title>
 6     <script src="js/jquery.min.js"></script>
 7     <script>
 8         //页面加载,绑定点击事件
 9         $(function () {
10             $("#btn").click(function () {
11                 alert("hello btn");
12             });
13         });
14     </script>
15 </head>
16 <body>
17 
18 <a href="user/testString">testString</a> <br>
19 <a href="user/testVoid">testVoid</a>  <br>
20 <a href="user/testModelAndView">testModelAndView</a> <br>
21 <a href="user/testForwardOrRedirect">testForwardOrRedirect</a> <br>
22 
23 <button id="btn">发送ajax的请求</button>
24 </body>
25 </html>

展示:

二.客户端发送json请求给服务器端

jsp:

 1     <script>
 2         //页面加载,绑定点击事件
 3         $(function () {
 4             $("#btn").click(function () {
 5                 // alert("hello btn");
 6 
 7                 //发送ajax请求
 8                 $.ajax({
 9                     //编写json格式数据,设置属性值
10                     url:"user/testAjax",
11                     contentType:"application/json;charset=UTF-8",
12                     data:'{"username":"哈哈","password":"123","age":30}',
13                     dataType:"json",
14                     type:"post",
15                     success:function (data) {
16                         //data服务器响应的json的数据,进行解析
17                     }
18                 })
19             });
20         });
21     </script>

方法:

 1     /**
 2      * 模拟Ajax异步请求响应,RequestBody 获得请求体数据
 3      * @param body
 4      */
 5     @RequestMapping("/testAjax")
 6     public void testAjax(@RequestBody String body){
 7 
 8         System.out.println("testAjax执行了...");
 9 
10         System.out.println(body);
11     }

执行结果:

三.服务器返回json给客户端

首先需要修改pom.xml导入jackson的jar包用于解析和封装json数据:

 1         <dependency>
 2             <groupId>com.fasterxml.jackson.core</groupId>
 3             <artifactId>jackson-databind</artifactId>
 4             <version>2.9.0</version>
 5         </dependency>
 6         <dependency>
 7             <groupId>com.fasterxml.jackson.core</groupId>
 8             <artifactId>jackson-core</artifactId>
 9             <version>2.9.0</version>
10         </dependency>
11         <dependency>
12             <groupId>com.fasterxml.jackson.core</groupId>
13             <artifactId>jackson-annotations</artifactId>
14             <version>2.9.0</version>
15         </dependency>

jsp:

 1     <script>
 2         //页面加载,绑定点击事件
 3         $(function () {
 4             $("#btn").click(function () {
 5                 // alert("hello btn");
 6 
 7                 //发送ajax请求
 8                 $.ajax({
 9                     //编写json格式数据,设置属性值
10                     url:"user/testAjax",
11                     contentType:"application/json;charset=UTF-8",
12                     data:'{"username":"哈哈","password":"123","age":30}',
13                     dataType:"json",
14                     type:"post",
15                     success:function (data) {
16                         //data服务器响应的json的数据,进行解析
17                         alert(data.toString());
18 
19                         alert(data.username);
20                         alert(data.password);
21                         alert(data.age);
22                     }
23                 })
24             });
25         });
26     </script>

方法:

 1     /**
 2      * 模拟Ajax异步请求响应,RequestBody:获得请求体数据,ResponseBody:服务器响应数据
 3      *
 4      * @param user
 5      */
 6     @RequestMapping("/testAjax")
 7     public @ResponseBody User testAjax(@RequestBody User user) {
 8 
 9         System.out.println("testAjax执行了...");
10 
11         //客户端发送ajax请求的数据,通过导入jackson的jar包将json数据转换为JavaBean对象user
12         System.out.println(user.toString());
13 
14         //模拟数据库查询
15         user.setUsername("小美");
16         user.setAge(55);
17 
18         //服务器返回给客户端数据
19         return user;
20     }

展示:

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!