(5)SpringMVC处理携带JSON格式(“key“:value)请求数据的Ajax请求

SpringMVC处理Ajax

参考文章数据交换的常见格式,如JSON格式和XML格式

请求参数的携带方式

浏览器发送到服务器的请求参数有name=value&...(键值对){key:value,...}(json对象)两种格式

浏览器发送到服务器的请求参数有name=value&...(键值对){key:value,...}(json对象)两种格式

  • URL请求和表单的GET请求会将请求参数以键值对的格式拼接到请求地址后面
  • form表单的POST请求会将请求参数以键值对的格式存储到请求报文的请求体中
  • 发起Ajax请求时,可以将请求参数以Json的格式存储到请求报文的请求体中

控制器方法获取两种格式请求参数的方式

  • name=value&键值对格式发送到服务器的请求参数的可以通过request对象的API获取,即在SpringMVC中可以直接通过控制器方法的形参获取请求参数
  • {key:value,}Json格式的请求参数时无法通过request对象获取,在SpringMVC中需要使用@RequestBody注解标识控制器方法的形参获取请求参数

发起Ajax请求的方式

现在比较流行的开发方式为异步调用, 前后台以异步Ajax请求的方式进行交换数据,传输的数据使用的是JSON

  • Ajax请求发送后,当浏览器接收到服务器的响应内容后不会重新加载整个页面,只会更新网页的部分实现局部刷新的效果

使用vue.js提供的axios方法发起Ajax请求,方法的参数是一个配置对象

  • method: 指定请求的方式
  • url: 指定请求的路径
  • paramsdata: 指定请求的参数

paramsdata属性的区别

  • 使用params属性时无论发送GET还是POST请求,请求参数都是以name=value&name=value的格式拼接到请求地址后,获取请求参数时通过requset对象的API
  • 使用data属性时,只能发送POST请求,请求参数是以json的格式存储到请求报文的请求体中,获取请求参数时需要相关的jar包将请求体中的json数据转成Java对象

使用axios({配置对象})方法发起Ajax请求,使用params属性将请求参数以name=value&name=value的格式拼接到请求地址后

javascript 复制代码
testAjax:function (event) {
    axios({
        method:"post",
        url:event.target.href,
        params:{
            username:"admin",
            password:"123456"
        }
    }).then(function (response) {//服务器处理Ajax请求成功后执行的回调函数
        // 服务器响应的结果都会被封装在response对象中,响应的数据都在data属性中
        alert(response.data);
    });

使用axios.post(url,[data])方法和axios.get(url)方法发起Ajax请求,使用data属性将请求参数以json的格式存储到请求报文的请求体中

javascript 复制代码
testAjax(){
    axios.post(
        "/SpringMVC/test/ajax",
        {username:"admin",password:"123456"}
    ).then(response=>{
        console.log(response.data);
    });
},

处理键值对的请求参数

使用axios({配置对象})方法发起Ajax请求,使用params属性将请求参数以name=value&name=value的格式拼接到请求地址后

html 复制代码
<div id="app">
    <!--请求超链接-->
    <a @click="testAxios()" th:href="@{/testAxios}">SpringMVC处理ajax</a>
</div>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        methods:{
            testAjax:function (event) {
                axios({
                    method:"post",
                    url:event.target.href,
                    params:{
                        username:"admin",
                        password:"123456"
                    }
                }).then(function (response) {//服务器处理Ajax请求成功后执行的回调函数
                    // 服务器响应的结果都会被封装在response对象中,响应的数据都在data属性中
                    alert(response.data);
                });
                // 阻止超链接默认的跳转行为
                event.preventDefault();
            }
        }
    });
</script>

编写控制器方法处理浏览器发起的Ajax请求,直接在控制器方法中的声明同名的形参获取请求地址中的请求参数

java 复制代码
@RequestMapping("/testAxios")
public void testAxios(String username, String password,HttpServletResponse response){
    System.out.println("username:"+username+",password:"+password);
    // 由于我们发起的是Ajax请求就是用来做局部刷新的即页面不能跳转,所以不能直接返回视图名称转发或重定向到一个页面,而是响应数据
    response.getWriter().write("hello,axios");
}

@RequestBody注解处理json格式

使用axios.post(url,[data])方法和axios.get(url)方法发起Ajax请求,将请求参数以json的格式存储到请求报文的请求体中

javascript 复制代码
testAjax(){
    axios.post(
        "/SpringMVC/test/ajax",
        {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);
    });
},

@RequestBody注解可以用来标识控制器方法的形参, 默认可以获取当前请求的请求体的全部内容然后为注解所标识的String类型的形参赋值

  • 将请求中请求体所包含的数据传递给请求参数,此注解一个处理器方法只能使用一次
java 复制代码
@RequestMapping("test/ajax")
public void testRequestBody(@RequestBody String requestBody){
    // requestBody:{"username":"admin","password":"123456"}
    System.out.println("requestBody:"+requestBody);
    // 由于我们发起的是Ajax请求就是用来做局部刷新的即页面不能跳转,所以不能直接返回视图名称转发或重定向到一个页面,而是响应数据
    response.getWriter().write("hello,axios");
}

需求: 使用@RequestBody注解获取请求体中json格式的请求参数,并且将json格式的请求参数转化为指定类型的Java对象或Map集合

第一步: 导入jackson的依赖

xml 复制代码
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.12.1</version>
</dependency>

第二步: 在SpringMVC的配置文件中开启mvc的注解驱动

xml 复制代码
<!--开启mvc注解驱动-->
<mvc:annotation-driven />

第三步: 指定实体类用来封装请求体中json格式的请求参数

java 复制代码
public class User {
    private Integer id;
    private String username;
    private String password;
    private Integer age;
    private String gender;
    public User() {
    }
    public User(Integer id, String username, String password, Integer age, String gender) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.age = age;
        this.gender = gender;
    }
    //getter和setter以及toString方法
}

第四步: 发起POST请求方式的Ajax请求,将请求参数以json的格式存储到请求报文的请求体中,然后传输到服务器

java 复制代码
testRequestBody(){
    axios.post(
        "/SpringMVC/test/RequestBody/json",
        {username:"admin",password:"123456",age:23,gender:"男"}
    ).then(response=>{
        console.log(response.data);
    });
},

第五步: 使用@RequestBody注解获取请求体中json格式的请求参数然后转化为指定的实体类对象或Map集合

java 复制代码
// 将请求体中json格式的数据转换为map集合
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody Map<String, Object> map,HttpServletResponse response) throws IOException {
    //{username=admin, password=123456,age=23,gender=男}
    System.out.println(map);
    response.getWriter().print("hello,axios");
}

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

JSON格式的扩展

控制器方法参数前添加@RequestBody注解,将请求体中的Json数组映射到List集合类型形参的String类型对象中

java 复制代码
@RequestMapping("/jsonArrayParam")
   @ResponseBody
   public String jsonArrayParam(@RequestBody List<String> hobbies) {
       //  JSON数组参数传递hobbies --> [唱, 跳, Rap, 篮球]
       System.out.println("JSON数组参数传递hobbies --> " + hobbies);
       return "{'module':'json array param'}";
   }

将请求体中的嵌套的Json对象数据映射到POJO对象形参的属性中

json 复制代码
   {
       "name":"菲茨罗伊",
       "age":"27",
       "address":{
           "city":"萨尔沃",   
           "province":"外域"
       }
   }
java 复制代码
@RequestMapping("/jsonPojoParam")
@ResponseBody
public String jsonPojoParam(@RequestBody User user) {
    // User{name='菲茨罗伊', age=27, address=Address{province='外域', city='萨尔沃'}}
    System.out.println("JSON对象参数传递user --> " + user);
    return "{'module':'json pojo param'}";
}

将请求体中包含JSON对象的数组映射到集合形参的多个POJO对象属性中

json 复制代码
[
    {
        "name":"菲茨罗伊",
        "age":"27",
        "address":{
            "city":"萨尔沃",
            "province":"外域"
        }
    },
    {
        "name":"地平线",
        "age":"136",
        "address":{
            "city":"奥林匹斯",
            "province":"外域"
        }
    }
]
java 复制代码
@RequestMapping("/jsonPojoListParam")
@ResponseBody
public String jsonPojoListParam(@RequestBody List<User> users) {
    /*user ---> [User{name='菲茨罗伊', age=27, address=Address{province='外域', city='萨尔沃'}},
    			User{name='地平线', age=136, address=Address{province='外域', city='奥林匹斯'}}]
    */
    System.out.println("JSON对象数组参数传递user --> " + users);
    return "{'module':'json pojo list param'}";
}
相关推荐
Mephisto.java34 分钟前
【大数据学习 | kafka高级部分】kafka的优化参数整理
大数据·sql·oracle·kafka·json·database
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
孤客网络科技工作室1 小时前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
沐雪架构师2 小时前
mybatis连接PGSQL中对于json和jsonb的处理
json·mybatis
丁总学Java3 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
Mephisto.java5 小时前
【大数据学习 | kafka高级部分】kafka的kraft集群
大数据·sql·oracle·kafka·json·hbase
Mephisto.java5 小时前
【大数据学习 | kafka高级部分】kafka的文件存储原理
大数据·sql·oracle·kafka·json
待磨的钝刨8 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
过期的H2O217 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax