• 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类。

    
<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    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.htmlh1>
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    package com.qcw.controller;
/**
 * @author wqc
 * @date 2022/9/30 15:25
 * Description:
 *  1.@RequestBody:将请求体中的内容和控制器方法的形参进行绑定
 *  2.使用@RequestBody注解将json格式的请求参数转换程Java对象
 *   a>导入Jackson的依赖
 *   b>在SpringMVC的配置文件中设置开启mvc的注解驱动：
 *   c>在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的Java类型的形参,使用@RequestBody注解标识即可
 *
 *  3.@ResponseBody:将所标识的控制器方法返回值作为响应报文的响应体响应到浏览器
 *  4.使用@ResponseBody响应浏览器json格式的数据
 *   a>导入Jackson的依赖
 *   b>在SpringMVC的配置文件中设置开启mvc的注解驱动：
 *   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 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 map = new HashMap();
//        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;
//    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
  • 相关阅读:
    MQTT 基础--保留消息：第 8 部分
    vue - Vue2兼容低版本浏览器
    flutter开发实战-inappwebview实现flutter与Javascript的交互JSBridge
    【广州华锐互动】VR建筑安全培训体验为建筑行业人才培养提供有力支持
    LeetCode每日一题--有序队列(整理最小表示法)
    大厂面试sql手撕题目总结
    R语言—基本数据管理
    软件工程经济学复习题答案
    ARM64 MMU 映射
    allatori8.0文档翻译-第十三步：Android Studio整合
  • 原文地址：https://blog.csdn.net/qq_47637405/article/details/127131473