前后端数据交互问题

布满荆棘的人生 2023-09-29 16:23 140阅读 0赞

## 一、Springboot接参注解 ##

### 1、@RequestBody注解 ###

*  该注解，用来接收前端传过来的json串.
 *  ![在这里插入图片描述][a0bda531055c4c2c90da8105545a5c87.png]

### 2、@PathVariable(“”) ###

*  该注解，用来接收url中占位符的参数.  
    ![在这里插入图片描述][a693f24eefcc418b869422b81ac84d07.png]

### 3、@RequestParam(“”) ###

*  这个注解，就是底层默认的方式.从url中获取参数.
 *  （用不用都差不多，用了的话、可以解决前后端参数不一问题。比如传来参数a，指定a赋值给b.）

### 4、接参不写注解的情况下 ###

![在这里插入图片描述][57085798fe26491b891f23c7935f14d7.png]

*  控制器会将url中的参数，自动映射到对象同名属性上.
 *  比如user有三个属性：id，username，password.前端传来id，则url中的id，自动赋值给user对象的属性id.

### 注：三者都较为常用. ###

## 二、前端提交数据方式 ##

注：**form表单直接提交、通常用在同步情况下.也就是页面和数据一起加载情况下**

（前端通过request.setA\*\*（前端采用<% reqeust.%>、<%=%>表达式接参.配合el、jstl）、cookie、Model（前端采用el接参）、ModelAndView返回数据）.这种较为老旧的技术.

### 1、form表单直接提交 ###

*  直接通过action提交数据，则默认采用get方法提交.参数会被url所携带
 *  采用post，参数会被隐式放在body中.f12就可以看到

### 2、ajax异步（主流） ###

#### 2.1、第一种提交json方式 ####

//第一种方法
    function hello1() {
        
        $.ajax(
            {
        
                url: "/hello4",
                type: "post",
                data: JSON.stringify({
        
                    "id": "1", "username": "123", "password": "123"
                }),
                contentType: 'application/json;charset=UTF-8',
                // dataType: "JSON",如果写json的话，前端必须返回json才能接收。
                // dataType: "JSON",
                async: true,
            }
        ).done(function (resp) {
        
            alert(resp)
        }).fail(function (resp) {
        
            alert(resp)
        })
    }

#### 2.2、第二种提交json方式 ####

//第二种方法
    function hello2() {
        
        $.ajax(
            {
        
                url: "/hello4",
                type: "post",
                data: JSON.stringify({
        
                    "id": "1", "username": "123", "password": "123"
                }),
                contentType: 'application/json;charset=UTF-8',
                // dataType: "JSON",如果写json的话，前端必须返回json才能接收。
                async: true,
                success: function (resp) {
        
                    alert(resp)
                }
                , error: function (resp) {
        
                    alert(resp)
                }
            }
        )
    }

#### 2.3、ajax+表单序列化 ####

注：**这两种序列化，后端都可以直接接收.不需要注解.**

*  第一种，表单内容序列化成数组，数组中的元素为objec对象.

var data = $(".login").serializeArray();

![在这里插入图片描述][a95436e35e094d9fb09a1d2d70daca22.png]

*  第二种，表单内容序列化成字符串（实质就是将参数拼接成字符串）

var string = $(".login").serialize();

![在这里插入图片描述][1080795f85394a3ea3a38425bdfcc4b6.png]

#### 2.4、form表单封装成json ####

![在这里插入图片描述][179a4ef0249f44cdb5cd8418afa2c20e.png]

$("#login1").click(function () {
        
        //表单序列化、serializeObject(),将表单数据转化json串！！！！！
        var serializeObject = $(".login").serializeObject();
        alert(JSON.stringify(serializeObject))
    })
    
    
    /**
     * 自动将form表单封装成json对象
     */
    $.fn.serializeObject = function () {
        
        var o = {
        };
        var a = this.serializeArray();
        $.each(a, function () {
        
            if (o[this.name]) {
        
                if (!o[this.name].push) {
        
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
        
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

#### 2.5、前端完整代码. ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        　
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
    
    <button onclick="hello1()">第一种提交json方式</button>
    <button onclick="hello2()">第二种提交json方式</button>
    
    <form class="login" onsubmit="return false">
        <input type="text" name="id"><br>
        <input type="text" name="username"><br>
        <input type="text" name="password">
        <button id="login">提交表单序列化内容</button>
    </form>
    <hr>
    <form class="login1" onsubmit="return false">
        <input type="text" name="id"><br>
        <input type="text" name="username"><br>
        <input type="text" name="password">
        <button id="login1">提交表单json</button>
    </form>
    
    <script>
    
        //    两种提交json方法、json放在body中.form放在url/请求体.
        //第一种方法
        function hello1() {
        
            $.ajax(
                {
        
                    url: "/hello4",
                    type: "post",
                    data: JSON.stringify({
        
                        "id": "1", "username": "123", "password": "123"
                    }),
                    contentType: 'application/json;charset=UTF-8',
                    // dataType: "JSON",如果写json的话，前端必须返回json才能接收。
                    // dataType: "JSON",
                    async: true,
                }
            ).done(function (resp) {
        
                alert(resp)
            }).fail(function (resp) {
        
                alert(resp)
            })
        }
    
        //第二种方法
        function hello2() {
        
            $.ajax(
                {
        
                    url: "/hello4",
                    type: "post",
                    data: JSON.stringify({
        
                        "id": "1", "username": "123", "password": "123"
                    }),
                    contentType: 'application/json;charset=UTF-8',
                    // dataType: "JSON",如果写json的话，前端必须返回json才能接收。
                    async: true,
                    success: function (resp) {
        
                        alert(resp)
                    }
                    , error: function (resp) {
        
                        alert(resp)
                    }
                }
            )
        }
    
    
        $("#login").click(function () {
        
            //表单序列化、serializeArray()序列化成对象，serialize()参数字符串拼接
            var data = $(".login").serializeArray();
            alert(data)
            var string = $(".login").serialize();
            alert(string)
            $.ajax({
        
                url: "/hello5",
                type: "post",
                data: data,
                success: function (resp) {
        
                    alert(resp)
                }
            })
        })
    
        $("#login1").click(function () {
        
            //表单序列化、serializeObject(),将表单数据转化json串！！！！！
            var serializeObject = $(".login").serializeObject();
            alert(JSON.stringify(serializeObject))
        })
    
    
        /**
         * 自动将form表单封装成json对象
         */
        $.fn.serializeObject = function () {
        
            var o = {
        };
            var a = this.serializeArray();
            $.each(a, function () {
        
                if (o[this.name]) {
        
                    if (!o[this.name].push) {
        
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
        
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
    
    
    </script>
    </body>
    </html>

[a0bda531055c4c2c90da8105545a5c87.png]: https://img-blog.csdnimg.cn/a0bda531055c4c2c90da8105545a5c87.png
[a693f24eefcc418b869422b81ac84d07.png]: https://img-blog.csdnimg.cn/a693f24eefcc418b869422b81ac84d07.png
[57085798fe26491b891f23c7935f14d7.png]: https://img-blog.csdnimg.cn/57085798fe26491b891f23c7935f14d7.png
[a95436e35e094d9fb09a1d2d70daca22.png]: https://img-blog.csdnimg.cn/a95436e35e094d9fb09a1d2d70daca22.png
[1080795f85394a3ea3a38425bdfcc4b6.png]: https://img-blog.csdnimg.cn/1080795f85394a3ea3a38425bdfcc4b6.png
[179a4ef0249f44cdb5cd8418afa2c20e.png]: https://img-blog.csdnimg.cn/179a4ef0249f44cdb5cd8418afa2c20e.png