springmvc-处理Ajax请求并响应数据

雨点打透心脏的1/2处 2024-03-23 16:39 165阅读 0赞

**1，index页面**

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
    <h1>index.xml</h1>
    <div id="app">
        <input type="button" value="测试SpringMVC处理ajax请求" @click="testAjax()"><br>
        <input type="button" value="测试SpringMVC处理json格式的请求参数" @click="testRequestBody()"><br>
        
        <a th:href="@{/responseBody}">测试SpringMVC使用@ResponseBody响应浏览器</a><br>
        <input type="button" value="测试SpringMVC使用注解@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">
        var vue=new Vue({
            el:"#app",
            methods:{
                testAjax(){//事件方法
                    //发送请求ajax请求
                    axios.post(
                        "/spring_mvc/ajax?id=5",//请求路径和参数
                        {uname:"admin",pwd:"123"}//json格式的参数
                    ).then(response=>{//成功处理请求后要执行的方法
                        //以日志形式将响应数据输出到浏览器控制器
                        console.log(response.data)
                    })
                },
                testRequestBody(){
                    axios.post(
                        "/spring_mvc/requestBody/json",
                        {uname:"admin",pwd:"123",age:20,gender:"男"}
                    ).then(response=>{
                        console.log(response.data)
                    });
                },
                testResponseBody(){
                        axios.post("/spring_mvc/responseBody/json").then(response=>{
                            //以日志的形式输出到浏览器控制器
                            console.log(response.data)
                        })
                }
            }
        });
        /**
         * axios({
               url:"",//请求路径
               method:"",//请求方式
               //以name=value&name=value的方式发送的请求参数
               //不管使用的请求方式是get或post，请求参数都会被拼接到请求地址后
               //此种方式的请求参数可以通过request.getParameter()获取
               params:{},
               //以json格式发送的请求参数
               //请求参数会被保存到请求报文的请求体传输到服务器
               //此种方式的请求参数不可以通过request.getParameter()获取
               data:{}
           }).then(response=>{//请求成功执行的函数then
               //将返回结果以日志形式输出到页面控制台
               console.log(response.data);
           });
         */
    </script>
    </body>
    </html>

**2，实体类User**

package com.dzqc.pojo;
    
    public class User {
        private Integer id;
        private String uname;
        private String pwd;
        private Integer age;
        private String gender;
    
        public User() {
        }
    
        public User(Integer id, String uname, String pwd, Integer age, String gender) {
            this.id = id;
            this.uname = uname;
            this.pwd = pwd;
            this.age = age;
            this.gender = gender;
        }
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getUname() {
            return uname;
        }
    
        public void setUname(String uname) {
            this.uname = uname;
        }
    
        public String getPwd() {
            return pwd;
        }
    
        public void setPwd(String pwd) {
            this.pwd = pwd;
        }
    
        public Integer getAge() {
            return age;
        }
    
        public void setAge(Integer age) {
            this.age = age;
        }
    
        public String getGender() {
            return gender;
        }
    
        public void setGender(String gender) {
            this.gender = gender;
        }
    
        @Override
        public String toString() {
            return "User{" +
                    "id=" + id +
                    ", uname='" + uname + '\'' +
                    ", pwd='" + pwd + '\'' +
                    ", age=" + age +
                    ", gender='" + gender + '\'' +
                    '}';
        }
    }

**3，测试类TestAjaxController**

package com.dzqc.controller;
    
    import com.dzqc.pojo.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.util.Arrays;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * 总结：
     * 1、SpringMVC处理路径中发送的请求参数；
     * 2、SpringMVC处理json请求数据：@RequestBody
     * @RequestBody：将请求体中的内容和控制器方法的形参进行绑定。
     * 使用@RequestBody注解将json格式的请求参数转换为java对象（实体类或Map）的步骤：
     * 第一步：引入jackson依赖；
     * 第二步：开启mvc注解驱动；
     * 第三步：在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的java类型的形参，使用@RequestBody注解标识即可。
     *
     * SpringMVC处理json格式的请求方式
     * 1，引入jackson依赖
     * 2，开启mvc注解驱动
     * 3,将json格式的请求参数要转成的类型，定义在控制器方法的形参中，并且使用@RequestMapping进行标识
     *
     *
     * @ResponseBody     将控制器方法的返回值作为响应体响应给浏览器
     * 将Java对象转换json格式响应给浏览器的步骤：
     * 1，引入Jackson依赖
     * 2，开启mvc注解驱动
     * 3，将转成json格式的Java对象作为控制器方法的返回值，使用@ResponseBody标识控制器方法
     *
     *
     * 常用Java对象转换json格式
     * 实体类->json对象
     * Map集合->json对象
     * list集合->json数组
     */
    @Controller  //标识组件
    public class TestAjaxController {
        @RequestMapping("/ajax")
        public void testAjax(Integer id, HttpServletResponse response) throws IOException {
            System.out.println("id = " + id);
            //响应数据到浏览器
            response.getWriter().write("hello,ajax");
        }
    
        @RequestMapping("/requestBody/json")
        public void testRequestBody(@RequestBody Map<String, Object> map, HttpServletResponse response) throws IOException {
            System.out.println("map = " + map);
            response.getWriter().write("hello,RequestBody");
        /*public void testRequestBody(@RequestBody User user, HttpServletResponse response) throws IOException {
            System.out.println("user = " + user);
            response.getWriter().write("hello,RequestBody");
        }*/
        /*public void testRequestBody(@RequestBody String jsonData, HttpServletResponse response) throws IOException {
            System.out.println("jsonData = " + jsonData);
            response.getWriter().write("hello,RequestBody");
        }*/
        }
        @RequestMapping("/responseBody")
        @ResponseBody
        public String testResponseBody(){
            return "success";
        }
        @RequestMapping("/responseBody/json")
        @ResponseBody
        public List<User> testResponseBodyJson(){
            User user=new User(1,"admin","111",18,"女");
            User user2=new User(2,"admin2","121",14,"女");
            User user3=new User(3,"admin3","131",15,"女");
            List<User> userList= Arrays.asList(user,user2,user3);
            return userList;
        }
        /*public Map<String,Object>  testResponseBodyJson(){
            User user=new User(1,"admin","111",18,"女");
            User user2=new User(2,"admin2","121",14,"女");
            User user3=new User(3,"admin3","131",15,"女");
            Map<String,Object> map=new HashMap<String, Object>();
            map.put("1",user);
            map.put("2",user2);
            map.put("3",user3);
            return map;
        }*/
        /*public User  testResponseBodyJson(){
            User user=new User(1,"admin","111",18,"女");
            return user;
        }*/
    }

测试springmvc处理ajax请求

![395d015bf4844f9ba8dc3e48eebb814c.jpeg][]测试springmvc处理json格式的请求参数

![76113506b8434597ac72a2cf9b49e7f9.jpeg][]

测试springmvc使用@ResponseBody响应浏览器

![c73b77d3173949c89bccfc95fe1ad9d7.jpeg][]

测试springmvc使用注解@ResponseBody响应json格式的数据请求到浏览器

![2d66aa9a9d0547d8a1f08827d4ab39ad.jpeg][]

[395d015bf4844f9ba8dc3e48eebb814c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/25bdcc522d5944a88d8c5c49aae27ab8.png
[76113506b8434597ac72a2cf9b49e7f9.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/e0bea59d398c46538b97399d227d6e13.png
[c73b77d3173949c89bccfc95fe1ad9d7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0cf7bb9aac684607b825082413b9924b.png
[2d66aa9a9d0547d8a1f08827d4ab39ad.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/fb09a0bd995c441a83b544888cf48a12.png