Spring boot 使用ajax前后端数据异步传输详解

最新推荐文章于 2022-04-03 22:32:29 发布

爱吃小巴掌

最新推荐文章于 2022-04-03 22:32:29 发布

阅读量1.3k

点赞数 2

分类专栏：提高文章标签： Spring boot 使用ajax前后端数据异步传输详解

本文链接：https://blog.csdn.net/qq_41575517/article/details/103375404

版权

提高专栏收录该内容

15 篇文章 1 订阅

订阅专栏

因为我们是将数据以JSON 的形式传输的，所以，后端需要将前端传过来的JSON字符串转换为JSON对象，需要添加alibab的fastjson，构建这个测试的所有依赖如下

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.3</version>
        </dependency>

    </dependencies>

由于只是一个测试，所以只要一个用一个按钮来测试是否可以将数据传到后台即可，js中必须正确引入jQuery，否则无法传输

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>hello</title>
    <script src="../js/jquery-3.4.1.min.js"></script><!--必须加../，这表示在上层目录下，spring boot默认在static中访问静态文件，./表示在当前目录下，/表示根目录-->
    <script>
        function test(){

            var user = {
                "name":"wccSend",
                "age":18
            };
            $.ajax({
                type: "POST",
                url: "/test/json",
                cache: false,  //禁用缓存
                data: JSON.stringify(user),//将json对象转换成字符串形式
                dataType: 'json',
                contentType : 'application/json;charset=utf-8',
                success: function (req) {
                    alert(req.name);
                }
            });

/*            $.ajax({
                type: "POST",
                url: "/test/json",
                cache: false,  //禁用缓存
                data:{
                    "name":"wccSend",
                    "age":18
                },/!*这种传输方式会被封装成name=wccSend&age=18形式，因为它是被请求带过去的，所以会转换成这种形式，请求以&分隔*!/
                dataType: 'json',
                contentType : 'application/json;charset=utf-8',
                success: function (req) {
                    alert("fdsafds");
                    alert(req.name);
                }
            });*/
            alert("已运行");
        }
    </script>
</head>
<body>
<input type="button" onclick="test()" value="submit">
</body>
</html>

注释的这一部分是在做做测试，用于观察发送的json字符串和json对象的区别，两者区别为：

发送的json对象到后台用String接收，输出为：

为了分清，我把代码载再贴一遍

$.ajax({
                type: "POST",
                url: "/test/json",
                cache: false,  //禁用缓存
                data:{
                    "name":"wccSend",
                    "age":18
                },/!*这种传输方式会被封装成name=wccSend&age=18形式，因为它是被请求带过去的，所以会转换成这种形式，请求以&分隔*!/
                dataType: 'json',
                contentType : 'application/json;charset=utf-8',
                success: function (req) {
                    alert(req.name);
                }
            });

name=wccSend&age=18
经试验，用其他类型无法接收JSON，JSONObject，HashMap<>,都无法接收，会报
java.lang.NoSuchMethodError: javax.servlet.ServletRequest.getServletContext()Ljavax/servlet/ServletC错误，这是因为内置tomcat不兼容引起的，我把内置tomcat调为和我本机tomcat版本相同就没有了这个错误，但是会有新错误：JSON parse error: Unrecognized token ‘name’: was expecting ‘null’, ‘true’, ‘false’ or NaN; nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token ‘name’: was expecting ‘null’, ‘true’, ‘false’ or NaN,由于有其他字符，所以无法转化为JSON数据结构。

而这个错误下面这个方法可以很好地避免，下面这个方法有多中接收方式

发送的json字符串到后台用String接收，输出为：

            var user = {
                "name":"wccSend",
                "age":18
            };
            $.ajax({
                type: "POST",
                url: "/test/json",
                cache: false,  //禁用缓存
                data: JSON.stringify(user),//将json对象转换成字符串形式
                dataType: 'json',
                contentType : 'application/json;charset=utf-8',
                success: function (req) {
                    alert(req.name);
                }
            });

{“name”:“wccSend”,“age”:18}
此种发送为json字符串形式，可以减少很多错误，而后端也有多种接收方式

1.可以用String 接收，然后将String字符串转化为json对象，获得其中的属性值，如：

    @RequestMapping(value = "/json",method = RequestMethod.POST)
    @ResponseBody
    public String success(@RequestBody String user){
        JSONObject jsonObject = JSON.parseObject(user);//将字符串形式的json数据转换成json对象，然后获取属性
        String name = jsonObject.getString("name");
        int age = jsonObject.getInteger("age");
        System.out.println(name);
        System.out.println(age);
        return "suibianchuandeshuju";
    }

2.可以用HashMap接收，直接获取其中的属性即可，比较简便

    @RequestMapping(value = "/json",method = RequestMethod.POST)
    @ResponseBody
    public HashMap<String,String> success(@RequestBody HashMap<String,String> user){
    
        System.out.println(user.get("name"));
        System.out.println(user.get("age"));

        HashMap<String,String > map = new HashMap<>();//为返回内容
        map.put("name","wccBack");
        map.put("age","20");

        return map;//返回的HashMap会被@ResponseBody直接转换为json对象，传输比较简单
    }