SpringMVC处理ajax请求

最新推荐文章于 2024-10-06 15:51:50 发布

小王同学爱科研

最新推荐文章于 2024-10-06 15:51:50 发布

阅读量172

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_46580576/article/details/128055992

版权

SpringMVC处理ajax请求

ajax发送的异步请求

json是一种与语言无关的数据交换的格式，使用Json的格式与解析方便的可以表示一个对象信息
json有两种格式：
①对象格式：{“key1”:obj,“key2”:obj,“key3”:obj…}
②数组/集合格式：[obj,obj,obj…]。

@RequestBody

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

<!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" th:value="使用@requestBody注解处理Json格式的请求参数" @click="testRequestBody()">
</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:"", //请求方式
     //以name1=value&name2=value的方式发送请求参数,不管使用给的请求方式是get还是post ,请求参数都会被坪街道请求地址后面
     //此种方式的请求参数可以通过request.getParameter()获取
                 params:{},
     //这种方式 在请求体保存 需要用处理json的jar包
                 data:{} //以json格式发送的请求参数,请求参数会被保存到请求报文的请求体 传输到服务器 ----post 因为get没有请求体
              }).then(response =>{
                console.log(response.data);
              });
         * **/
        var vue = new Vue({
             el:"#app",
             methods:{
                
                 testRequestBody(){
                     axios.post(
                         " /springmvc/test/RequestBody/json",
                         {username:"admin",password:"123456",age:23,gender:"男"}
                     ).then(response =>{
                         console.log(response.data);
                     });
                 }
             }
        });

    </script>
</body>
</html>

@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对象

导入Jackson 依赖

pom.xml

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

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

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

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

@Controller
public class TestAjaxController {
/**
     * Description:
     *  1.@RequestBody:将请求体重的内容和控制器方法的形参进行绑定
     *  2.来使用@RequestBody注解将json 格式的请求参数转化为java对象
     *  a> 导入jackson的 依赖
     *  b> 需要在 springmvc的配置文件中来开启 springmvc 的注解驱动 <mvc:annotation-driven></mvc:annotation-driven>
     *  c> 在处理请求的控制器方法的形参位置,直接设置json 格式的请求参数 所要转化的java类型的形参使用 @RequestBody 注解标识即可
     *  
     * */
     * 
     *  
@RequestMapping("/test/RequestBody/json")
    public void testRequestBody(@RequestBody  User user,HttpServletResponse response) throws IOException {
        System.out.println(user);
        response.getWriter().write("hello requestBody");
    }

上述例子我们把json格式返回为一个 user对象,也可以返回一个 map 集合

@RequestMapping("/test/RequestBody/json")
    public void testRequestBody(@RequestBody  Map<String,Object> map user,HttpServletResponse response) throws IOException {
        System.out.println(map);
        response.getWriter().write("hello requestBody");
    }

@ResponseBody(高频使用)

@ResponseBody用于标识一个控制器方法，可以将该方法的返回值直接作为响应报文的响
使用@ResponseBody的注解响应浏览器json格式的数据
a> 代入jackson依赖
b>在SpringMVC配置文件中设置开启mvc注解mvc:annotation-driven
c>将需要转化的json字符串的java对象直接作为控制器方法的返回值,使用@ResponseBody注解表示控制器方法,就可以将java对象直接转换成为json字符串,并响应到浏览器 —否则在浏览器上得到的java对象是一个存储java对象的地址

<input type="button" th:value="使用@requestBody注解响应json格式的数据" @click="testResponseBody()">

var vue = new Vue({
             el:"#app",
             methods:{
                 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/RequestBody/json").then(response =>{
                        console.log(response.data)
                     });
                 }
             }
        });

常用的java对象转化为json的结果

实体类 --> json对象
map --> json对象
list -->json数组

// 1. 实体类 --> json对象
 @RequestMapping("/test/ResponseBody/json")
 @ResponseBody
    public User testResponseBodyJson() {
        User  user  = new User(1001,"admin",20,"男");
        return user ;
    }

运行结果:
1. 实体类 --> json对象

// 2. map --> json对象
@RequestMapping("/test/ResponseBody/json")
    @ResponseBody
    public Map<String,Object> testResponseBodyJson() {
        User  user  = new User(1001,"admin",20,"男");
        User  user2  = new User(1002,"admin",20,"男");
        User  user3  = new User(1003,"admin",20,"男");
        Map<String,Object> map = new HashMap<>();
        map.put("1001",user);
        map.put("1002",user2);
        map.put("1003",user3);
        return map;
    }

运行结果 2. map --> json对象
3. list -->json数组

@RequestMapping("/test/ResponseBody/json")
    @ResponseBody
    public List<User> testResponseBodyJson() {
        User  user  = new User(1001,"admin",20,"男");
        User  user2  = new User(1002,"admin",20,"男");
        User  user3  = new User(1003,"admin",20,"男");
        List<User> list = Arrays.asList(user,user2,user3);
        return list;
    }