前后端数据交互问题

最新推荐文章于 2024-01-09 10:07:46 发布

就叫飞六吧

最新推荐文章于 2024-01-09 10:07:46 发布

阅读量549

点赞数

分类专栏： Java 文章标签：交互 json 前端

本文链接：https://blog.csdn.net/weixin_52236586/article/details/125257967

版权

Java 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

一、Springboot接参注解

1、@RequestBody注解

该注解，用来接收前端传过来的json串.

2、@PathVariable(“”)

该注解，用来接收url中占位符的参数.

3、@RequestParam(“”)

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

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

在这里插入图片描述

控制器会将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();

在这里插入图片描述

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

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

在这里插入图片描述

2.4、form表单封装成json

在这里插入图片描述

$("#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>