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

在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"/>

    <!-- 配置Thymeleaf视图解析器 -->
    <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>

    <!--
        配置默认的servlet处理静态资源
        -当前工程的web.xml配置的前端控制器DispatcherServlet的url-pattern是/
         tomcat的web.xml配置的默认的DefaultServlet的url-pattern也是/
         此时,浏览器发送的请求会优先被DispatcherServlet进行处理,但是DispatcherServlet无法处理静态资源
         若配置了<mvc:default-servlet-handler/>标签,此时浏览器的所有请求都会被DefaultServlet处理
         若配置了<mvc:default-servlet-handler/>和<mvc:annotation-driven/>
         浏览器发送的请求会先被DispatcherServlet处理,若无法处理再交给DefaultServlet处理
    -->
    <mvc:default-servlet-handler/>

    <!--开启mvc的注解驱动-->
    <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;
//    }
}

猜你喜欢

转载自blog.csdn.net/qq_47637405/article/details/127131473