ajax中json对象和json字符串使用

最新推荐文章于 2023-10-07 23:57:32 发布

蓝天白水

最新推荐文章于 2023-10-07 23:57:32 发布

阅读量1.6k

点赞数 3

分类专栏： js 文章标签： java ajax js

本文链接：https://blog.csdn.net/qq_33012981/article/details/115052130

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

`ajax`中`json`对象和`json`字符串使用

文章目录

`ajax`中`json`对象和`json`字符串使用
1 前言
2 `json`字符串和`json`对象的区别
3 `3`种数据格式
4 测试
5 总结

1 前言

使用ajax进行异步请求的时候，我发现自己总是不能区分什么使用该使用json对象，什么时候使用json字符串，发送请求之后，后端springmvc不能正确的接收ajax请求的数据。为了解决这个问题，我在这里把ajax请求能够发送的数据格式总结一下：

&连接的key=value，这个我们应该很熟悉，GET请求的查询参数一般就是这种格式，它紧跟在url网址后面。我们在ajax中也能发送该种类型的数据，此时contentType必须为application/x-www-form-urlencoded; charset=UTF-8
json对象，适用于GET和POST请求，且此时contentType必须为application/x-www-form-urlencoded; charset=UTF-8，ajax会自动将json对象转化为&连接的key=value格式的数据，GET请求就拼接在url后面，POST请求就放入post请求体中
json字符串，只适用于POST请求，且此时contentType必须为application/json; charset=UTF-8

所以ajax请求真正发送的数据格式只有两种，&连接的key=value和json字符串

2 `json`字符串和`json`对象的区别

以前我一直傻傻分不清它们两者的区别，后来发现区分太简单了。

大家先来猜一猜下面这个是json对象还是json字符串？

{"name":"lx","age":12,"password":"132232"}

很明显这是一个json对象，你要记住json字符串它是一个字符串，在java中，我们定义一个字符串应该是"12"这样的对不对，那么在js中同样也是。只不过js中一般用单引号''来表示一个字符串。所以一个真正的json字符串应该是下面这种格式的

'{"name":"lx","age":12,"password":"132232"}'

3 `3`种数据格式

application/x-www-form-urlencoded，表单格式数据，实际上就是&连接的key=value格式的数据
multipart/form-data，一般用作文件上传，也就是说当文件上传和普通请求参数混合一起的时候使用这种格式提交表单
application/json，发送的数据格式为json字符串

我们常见的就这3种数据格式，现在前后端分离火热，使用的最多的就是application/json，后端springmvc使用@RequestBody注解自动将json字符串转换为一个对象。

4 测试

上面说了这么多，还是不如测试一下，看看结果

4.1 项目配置

我这里测试的环境为tomcat9.022+springmvc，我并没有用springboot，其实都一样。

下面是springmvc相关配置，注册静态资源位置，相关原理可以看springmvc–静态资源的处理这篇文章

@Configuration
@EnableWebMvc
@ComponentScan({"cn.lx.spring.v2.controller"})
public class MvcConfig  implements WebMvcConfigurer {


    /**
     * Add handlers to serve static resources such as images, js, and, css
     * files from specific locations under web application root, the classpath,
     * and others.
     *
     * @param registry
     * 配置静态资源位置
     */
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
            //哪些请求是静态资源请求，我这里配置所有的，也就是说找不到@RequestMapping映射的
            //请求都认为是静态资源请求
            .addResourceHandler("/*")
            //静态资源位置
            .addResourceLocations("classpath:/static/");
    }
}

另外再提供一个User类，里面就三个字段，分别为String name、String password、int age，并提供对应的getter和setter方法。

4.2 `ajax`请求发送`&`连接的`key=value`格式的数据

测试GET和POST两种不同请求方式发送这种格式数据

后端处理本次请求的Controller

@RequestMapping("/test/user2")
@ResponseBody
public User getUser2( User user){
    log.info("user:{}",user);
    return user;
}

4.2.1 `GET`

编写一个index.html页面，放入项目根路径的static文件夹下面，并编写如下脚本

<!--引入jQuery
这里使用的是相对路径-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){

        $.ajax({
            url:"test/user2",
            data:"name=lx&age=12&password=132232",
            dataType:"json",
            //不写contentType默认为application/x-www-form-urlencoded
            //contentType:"application/json",
            type:"post",
            success:function (resp){
                console.log(resp);
            }
        })
    })
</script>

最终浏览器控制台打印json格式数据Object { name: "lx", password: "132232", age: 12 }。打开浏览器，F12查看本次请求发送的数据格式如下所示

在这里插入图片描述

GET请求没有请求体，它的数据拼接在url后面

4.2.2 `POST`

编写一个index.html页面，放入项目根路径的static文件夹下面，并编写如下脚本

<!--引入jQuery
这里使用的是相对路径-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){

        $.ajax({
            url:"test/user2",
            data:"name=lx&age=12&password=132232",
            dataType:"json",
            //不写contentType默认为application/x-www-form-urlencoded
            //contentType:"application/json",
            type:"post",
            success:function (resp){
                console.log(resp);
            }
        })
    })
</script>

最终浏览器控制台打印json格式数据Object { name: "lx", password: "132232", age: 12 }。打开浏览器，F12查看本次请求发送的数据格式如下所示

在这里插入图片描述

4.3 `ajax`请求发送`json`对象格式的数据

无论是GET和POST请求，ajax自动将json对象格式的数据转化为&连接的key=value格式的数据

4.3.1 `GET`

编写一个index.html页面，放入项目根路径的static文件夹下面，并编写如下脚本

<!--引入jQuery
这里使用的是相对路径-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){

        $.ajax({
            url:"test/user",
            //json对象
            data:{"name":"lx","age":12,"password":"132232"},
            dataType:"json",
            //不写contentType默认为application/x-www-form-urlencoded
            //contentType:"application/json",
            type:"get",
            success:function (resp){
                console.log(resp);
            }
        })
    })
</script>

后端处理本次请求的Controller

@GetMapping("/test/user")
@ResponseBody
public User getUser(User user){
    log.info("user:{}",user);
    return user;
}

最终浏览器控制台打印json格式数据Object { name: "lx", password: "132232", age: 12 }。打开浏览器，F12查看本次请求发送的数据格式如下所示

在这里插入图片描述

ajax自动将json对象格式的数据转化为&连接的key=value格式的数据，并拼接在url后面作为请求参数，所以后端能够处理此种格式的数据。@RequestBody注解不支持GET请求，跳过测试。

4.3.2 `POST`

编写一个index.html页面，放入项目根路径的static文件夹下面，并编写如下脚本

<!--引入jQuery
这里使用的是相对路径-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){

        $.ajax({
            url:"test/user3",
            //json对象
            data:{"name":"lx","age":12,"password":"132232"},
            dataType:"json",
            //不写contentType默认为application/x-www-form-urlencoded
            //contentType:"application/json",
            type:"post",
            success:function (resp){
                console.log(resp);
            }
        })
    })
</script>

后端处理本次请求的Controller

@PostMapping("/test/user3")
@ResponseBody
public User getUser3(User user){
    log.info("user:{}",user);
    return user;
}

最终浏览器控制台打印json格式数据Object { name: "lx", password: "132232", age: 12 }。打开浏览器，F12查看本次请求发送的数据格式如下所示

在这里插入图片描述

ajax自动将json对象格式的数据转化为&连接的key=value格式的数据，并放入请求体中，所以后端能够处理此种格式的数据，处理过程见springmvc–ServletModelAttributeMethodProcessor兜底处理@ModelAttribute注解和无注解这篇文章。

那么如果我们我们在参数上加入了@RequestBody注解，会出现什么情况呢？

答案是响应响应状态码415–不支持的媒体类型。我们知道@RequestBody注解的作用是将请求体中的json字符串转化为一个对象，现在我们请求体中的数据明显不是json字符串，springmvc没有办法将它转化为对象，所以报错了

4.4 `ajax`请求发送`json`字符串格式的数据

@RequestBody注解不支持GET请求，所以在这里我们就直接测试POST请求

编写一个index.html页面，放入项目根路径的static文件夹下面，并编写如下脚本

<!--引入jQuery
这里使用的是相对路径-->
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){

        $.ajax({
            url:"test/user3",
            //json字符串
            data:'{"name":"lx","age":12,"password":"132232"}',
            //或者使用json工具将对象转化为字符串也行
            //data:JSON.stringify({"name":"lx","age":12,"password":"132232"}),
            dataType:"json",
            //指定发送的数据格式为json
            contentType:"application/json",
            type:"post",
            success:function (resp){
                console.log(resp);
            }
        })
    })
</script>

后端处理本次请求的Controller

@PostMapping("/test/user")
@ResponseBody
public User getUser4(@RequestBody User user){
    log.info("user:{}",user);
    return user;
}

最终浏览器控制台打印json格式数据Object { name: "lx", password: "132232", age: 12 }。打开浏览器，F12查看本次请求发送的数据格式如下所示

在这里插入图片描述

可以看到，现在就不是表单数据了，而是json数据，参数上必须加上@RequestBody注解处理请求体中的json数据，处理过程见springmvc–RequestResponseBodyMethodProcessor处理@RequestBody注解和@ResponseBody注解这篇文章。

5 总结

总结一下ajax请求能够发送的数据格式：

&连接的key=value，适用于GET和POST请求，此时contentType必须为application/x-www-form-urlencoded，后端不能使用@RequestBody注解
json对象，适用于GET和POST请求，且此时contentType必须为application/x-www-form-urlencoded，ajax会自动将json对象转化为&连接的key=value格式的数据，GET请求就拼接在url后面，POST请求就放入post请求体中，后端不能使用@RequestBody注解
json字符串，只适用于POST请求，且此时contentType必须为application/json，后端必须使用@RequestBody注解