SpringMVC处理ajax请求

BestJeremy

于 2022-09-19 11:27:13 发布

阅读量162

点赞数

文章标签： java servlet 开发语言

本文链接：https://blog.csdn.net/qq_42671904/article/details/126929335

版权

@RequestBody

@RequestBody可以获取请求体信息，使用@RequestBody注解标识控制器方法的形参，当前请求的请求体就会为当前注解所标识的形参赋值

<!--此时必须使用post请求方式，因为get请求没有请求体-->
<form th:action="@{/test/RequestBody}" method="post">
 用户名：<input type="text" name="username"><br>
 密码：<input type="password" name="password"><br>
  <input type="submit">
</form>

@RequestMapping("/test/RequestBody")
public String testRequestBody(@RequestBody String requestBody){
  System.out.println("requestBody:"+requestBody);
  return "success";
}

输出结果：
requestBody:username=admin&password=123456

@RequestBody获取json格式的请求参数

在使用了axios发送ajax请求之后，浏览器发送到服务器的请求参数有两种格式：
1、name=value&name=value...，此时的请求参数可以通过request.getParameter()获取，对应
SpringMVC中，可以直接通过控制器方法的形参获取此类请求参数

2、{key:value,key:value,...}，此时无法通过request.getParameter()获取，之前我们使用操作
json的相关jar包gson或jackson处理此类请求参数，可以将其转换为指定的实体类对象或map集
合。在SpringMVC中，直接使用@RequestBody注解标识控制器方法的形参即可将此类请求参数
转换为java对象

使用@RequestBody获取json格式的请求参数的条件：

1、导入jackson的依赖

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

2、SpringMVC的配置文件中设置开启mvc的注解驱动

<!--开启mvc的注解驱动-->
<mvc:annotation-driven />

3、在控制器方法的形参位置，设置json格式的请求参数要转换成的java类型（实体类或map）的参数，并使用@RequestBody注解标识

<input type="button" value="测试@RequestBody获取json格式的请求参数"
@click="testRequestBody()"><br>
<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">
  var vue = new Vue({
    el:"#app",
    methods:{
      testRequestBody(){
        axios.post(
          "/SpringMVC/test/RequestBody/json",
         {username:"admin",password:"123456"}
       ).then(response=>{
          console.log(response.data);
       });
     }
   }
 });
</script>

//将json格式的数据转换为map集合
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody Map<String, Object> map,
HttpServletResponse response) throws IOException {
  System.out.println(map);
  //{username=admin, password=123456}
  response.getWriter().print("hello,axios");
}
//将json格式的数据转换为实体类对象
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody User user, HttpServletResponse
response) throws IOException {
  System.out.println(user);
  //User{id=null, username='admin', password='123456', age=null,
gender='null'}
  response.getWriter().print("hello,axios");
}

@ResponseBody

@ResponseBody用于标识一个控制器方法，可以将该方法的返回值直接作为响应报文的响应体响应到浏览器

@RequestMapping("/testResponseBody")
public String testResponseBody(){
  //此时会跳转到逻辑视图success所对应的页面
  return "success";
}
@RequestMapping("/testResponseBody")
@ResponseBody
public String testResponseBody(){
  //此时响应浏览器数据success
  return "success";
}

@ResponseBody响应浏览器json数据

服务器处理ajax请求之后，大多数情况都需要向浏览器响应一个java对象，此时必须将java对象转换为json字符串才可以响应到浏览器，之前我们使用操作json数据的jar包gson或jackson将java对象转换为json字符串。在SpringMVC中，我们可以直接使用@ResponseBody注解实现此功能
@ResponseBody响应浏览器json数据的条件：
1、导入jackson的依赖

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

2、SpringMVC的配置文件中设置开启mvc的注解驱动

3、使用@ResponseBody注解标识控制器方法，在方法中，将需要转换为json字符串并响应到浏览器的java对象作为控制器方法的返回值，此时SpringMVC就可以将此对象直接转换为json字符串并响应到浏览器

<input type="button" value="测试@ResponseBody响应浏览器json格式的数据"
@click="testResponseBody()"><br>
<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">
  var vue = new Vue({
    el:"#app",
    methods:{
      testResponseBody(){
        axios.post("/SpringMVC/test/ResponseBody/json").then(response=>{
          console.log(response.data);
       });
     }
   }
 });
</script>

//响应浏览器list集合
@RequestMapping("/test/ResponseBody/json")
@ResponseBody
public List<User> testResponseBody(){
  User user1 = new User(1001,"admin1","123456",23,"男");
  User user2 = new User(1002,"admin2","123456",23,"男");
  User user3 = new User(1003,"admin3","123456",23,"男");
  List<User> list = Arrays.asList(user1, user2, user3);
  return list;
}
//响应浏览器map集合
@RequestMapping("/test/ResponseBody/json")
@ResponseBody
public Map<String, Object> testResponseBody(){
  User user1 = new User(1001,"admin1","123456",23,"男");
  User user2 = new User(1002,"admin2","123456",23,"男");
  User user3 = new User(1003,"admin3","123456",23,"男");
  Map<String, Object> map = new HashMap<>();
  map.put("1001", user1);
  map.put("1002", user2);
  map.put("1003", user3);
  return map;
}
//响应浏览器实体类对象
@RequestMapping("/test/ResponseBody/json")
@ResponseBody
public User testResponseBody(){
  return user;
}

@RestController注解

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

index.html

<!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>
    <a th:href="@{/test/down}">下载图片</a>
    <form th:action="@{/test/up}" method="post" enctype="multipart/form-data">
        头像：<input type="file" name="photo"><br>
        <input type="submit" value="上传">
    </form>
</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",
        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>