SpringMVC处理Ajax请求及处理和响应json格式的数据

悠悠 2024-04-03 08:05 76阅读 0赞

##### 在SpringMVC中处理Ajax的请求可以用到@RequestBody与@ResponseBody注解实现 #####

###### 1.@RequestBody:将请求体中的内容和控制器方法的形参进行绑定 ######

###### 2.使用@RequestBody注解将json格式的请求参数转换程Java对象（三个步骤） ######

> a>导入Jackson的依赖  
> b>在SpringMVC的配置文件中设置开启mvc的注解驱动：mvc:annotation-driven/  
> c>在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的Java类型的形参,使用@RequestBody注解标识即可

###### 3.@ResponseBody:将所标识的控制器方法返回值作为响应报文的响应体响应到浏览器 ######

###### 4.使用@ResponseBody响应浏览器json格式的数据（三个步骤） ######

> a>导入Jackson的依赖  
> b>在SpringMVC的配置文件中设置开启mvc的注解驱动：mvc:annotation-driven/  
> c>将需要转换为json字符串的Java对象直接作为控制器方法的返回值，使用@ResponseBody注解标识控制器方法就可以将Java对象直接转换为json字符串，并响应到浏览器

###### 5.@RestController注解 ######

这个注解以后会使用的多

> @RestController注解是springMVC提供的一个复合注解，标识在控制器的类上，就相当于为类添加了  
> @Controller注解，并且为其中的每个方法添加了@ResponseBody注解

6.常用的Java对象转换为json的结果：

> 实体类–》json对象  
> map–》json对象  
> list–》json数组

*下面是实例的代码：*  
首先在maven工程里创建新的module（其他方式均可），然后在pom文件中导入依赖，在其中包括我们上文所写到的jackson的依赖，然后配置web里的web.xml编码过滤器、处理请求方式过滤器以及SpringMVC的前端控制器。之后就可以在jsp中写例子以及axios的代码，然后在controller里处理实现。另外我们在响应给json格式数据时，我们在这里创建了一个User类。

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xmlns:context="http://www.springframework.org/schema/context"
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    
        
        <context:component-scan base-package="com.qcw.controller"/>
    
        
        <bean id="viewResolver"
              class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
            <property name="order" value="1"/>
            <property name="characterEncoding" value="UTF-8"/>
            <property name="templateEngine">
                <bean class="org.thymeleaf.spring5.SpringTemplateEngine">
                    <property name="templateResolver">
                        <bean
                                class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
                            
                            <property name="prefix" value="/WEB-INF/templates/"/>
                            
                            <property name="suffix" value=".html"/>
                            <property name="templateMode" value="HTML5"/>
                            <property name="characterEncoding" value="UTF-8" />
                        </bean>
                    </property>
                </bean>
            </property>
        </bean>
    
        
        <mvc:default-servlet-handler/>
    
        
        <mvc:annotation-driven/>
        
        <mvc:view-controller path="/" view-name="index"></mvc:view-controller>
    
    </beans>

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
    
    <div id="app">
        <h1>index.html</h1>
        <input type="button" value="测试SpringMVC处理Ajax请求" @click="testAjax()"><br>
        <input type="button" value="使用@RequestBody注解处理json格式的请求参数" @click="testRequestBody()"><br>
        <a th:href="@{/test/ResponseBody}">测试@ResponseBody注解响应浏览器数据</a><br>
        <input type="button" value="使用@ResponseBody注解响应json格式的数据" @click="testResponseBody()"><br>
    </div>
    
    <script type="text/javascript" th:src="@{/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
    <script type="text/javascript">
    
        /**
        *axios({
              url:"",       //请求路径
              method:"",    //请求方式（以name=value&name=value的方式发送的请求参数，
                             //-无论使用的请求方式get还是post，请求参数都会被拼接到请求地址后）
                             //-此种方式的请求参数可以通过request.getParameter()获取
    
              params:{},    //请求方式（以json格式发送的请求参数
                             //-请求参数会被保存到请求报文的请求体传输到服务器）
                             //-此种方式的请求参数不可以通过request.getParameter()获取
    
                data:{}
              }).then(response=>{
                  console.log(response.data);
              });
         */
    
        var vue = new Vue({
          
            el:"#app",
            data:{
          },
            methods:{
          
                testAjax(){
          
                    axios.post(
                        "/SpringMVC/test/ajax?id=1001",
                        {
          username:"admin",password:"123456"}
                    ).then(response=>{
          
                        console.log(response.data);
                    });
                },
    
                testRequestBody(){
          
                    axios.post(
                        "/SpringMVC/test/RequestBody/json",
                        {
          username:"admin",password:"123456",age:23,gender:"男"}
                    ).then(response=>{
          
                        console.log(response.data);
                    });
                },
    
                testResponseBody(){
          
                    axios.post("/SpringMVC/test/ResponseBody/json").then(response=>{
          
                        console.log(response.data);
                    });
                }
    
            }
        });
    
    </script>
    </body>
    </html>

package com.qcw.controller;
    /**
     * @author wqc
     * @date 2022/9/30 15:25
     * Description:
     *  1.@RequestBody:将请求体中的内容和控制器方法的形参进行绑定
     *  2.使用@RequestBody注解将json格式的请求参数转换程Java对象
     *   a>导入Jackson的依赖
     *   b>在SpringMVC的配置文件中设置开启mvc的注解驱动：<mvc:annotation-driven/>
     *   c>在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的Java类型的形参,使用@RequestBody注解标识即可
     *
     *  3.@ResponseBody:将所标识的控制器方法返回值作为响应报文的响应体响应到浏览器
     *  4.使用@ResponseBody响应浏览器json格式的数据
     *   a>导入Jackson的依赖
     *   b>在SpringMVC的配置文件中设置开启mvc的注解驱动：<mvc:annotation-driven/>
     *   c>将需要转换为json字符串的Java对象直接作为控制器方法的返回值，使用@ResponseBody注解标识控制器方法就可以将Java对象直接转换为json字符串，并响应到浏览器
     *
     *  常用的Java对象转换为json的结果：
     *   实体类--》json对象
     *   map--》json对象
     *   list--》json数组
     */
    
    @Controller
    public class TestAjaxController {
        
    
        @RequestMapping("/test/ajax")
        public void textAjax(Integer id, @RequestBody String requestBody, HttpServletResponse response) throws IOException {
        
            System.out.println("requestBody = " + requestBody);
            System.out.println("id = " + id);
            //解决firefox浏览器xml解析错误，语法位置：http://localhost:8080/SpringMVC/test/ajax?id=1001
            response.setContentType("text/text;charset=utf-8");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write("hello,axios");
        }
    
        @RequestMapping("/test/RequestBody/json")
        public void testRequestBody(@RequestBody Map<String,Object> map, HttpServletResponse response) throws IOException {
        
            System.out.println("map = " + map);
    
            response.setContentType("text/text;charset=utf-8");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write("hello,RequestBody");
        }
    
        public void testRequestBody(@RequestBody User user, HttpServletResponse response) throws IOException {
        
            System.out.println("user = " + user);
    
            response.setContentType("text/text;charset=utf-8");
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write("hello,RequestBody");
        }
    
    
        @RequestMapping("/test/ResponseBody")
        @ResponseBody
        public String testResponseBody(){
        
            return "success";
        }
    
        @RequestMapping("/test/ResponseBody/json")
        @ResponseBody
            public List<User> testResponseBodyJson(){
        
            User user1 = new User(1001,"admin1","123456",20,"男");
            User user2 = new User(1002,"admin2","123456",20,"男");
            User user3 = new User(1003,"admin3","123456",20,"男");
            List<User> list = Arrays.asList(user1, user2, user3);
            return list;
        }
    
    //    public Map<String, Object> testResponseBodyJson(){
        
    //        User user1 = new User(1001,"admin1","123456",20,"男");
    //        User user2 = new User(1002,"admin2","123456",20,"男");
    //        User user3 = new User(1003,"admin3","123456",20,"男");
    //        Map<String, Object> map = new HashMap<String, Object>();
    //        map.put("1001",user1);
    //        map.put("1002",user2);
    //        map.put("1003",user3);
    //        return map;
    //    }
    
    //    public User testResponseBodyJson(){
        
    //        User user = new User(1001,"admin","123456",20,"男");
    //        return user;
    //    }
    }