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

た入场券 2022-11-12 01:37 329阅读 0赞

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

### 文章目录 ###

*  \`ajax\`中\`json\`对象和\`json\`字符串使用
 *  1 前言
 *  2 \`json\`字符串和\`json\`对象的区别
 *  3 \`3\`种数据格式
 *  4 测试
 *   *  4.1 项目配置
     *  4.2 \`ajax\`请求发送\`&\`连接的\`key=value\`格式的数据
     *   *  4.2.1 \`GET\`
         *  4.2.2 \`POST\`
     *  4.3 \`ajax\`请求发送\`json\`对象格式的数据
     *   *  4.3.1 \`GET\`
         *  4.3.2 \`POST\`
     *  4.4 \`ajax\`请求发送\`json\`字符串格式的数据
 *  5 总结

# 1 前言 #

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

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

> 1.  `application/x-www-form-urlencoded`，表单格式数据，实际上就是`&`连接的`key=value`格式的数据
> 2.  `multipart/form-data`，一般用作文件上传，也就是说当文件上传和普通请求参数混合一起的时候使用这种格式提交表单
> 3.  `application/json`，发送的数据格式为`json`字符串
> 
> 我们常见的就这`3`种数据格式，现在前后端分离火热，使用的最多的就是`application/json`，后端`springmvc`使用`@RequestBody`注解自动将`json`字符串转换为一个对象。

# 4 测试 #

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

## 4.1 项目配置 ##

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

下面是`springmvc`相关配置，注册静态资源位置，相关原理可以看[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`文件夹下面，并编写如下脚本

<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`查看本次请求发送的数据格式如下所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center]

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

### 4.2.2 `POST` ###

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center 1]

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

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

### 4.3.1 `GET` ###

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

<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`查看本次请求发送的数据格式如下所示

![在这里插入图片描述][2021032117112094.png_pic_center]

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

### 4.3.2 `POST` ###

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

<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`查看本次请求发送的数据格式如下所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center 2]

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

> 那么如果我们我们在参数上加入了`@RequestBody`注解，会出现什么情况呢？
> 
> 答案是响应响应状态码`415`–不支持的媒体类型。我们知道`@RequestBody`注解的作用是将请求体中的`json`字符串转化为一个对象，现在我们请求体中的数据明显不是`json`字符串，`springmvc`没有办法将它转化为对象，所以报错了

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

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

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

<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`查看本次请求发送的数据格式如下所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center 3]

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

# 5 总结 #

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

[springmvc]: https://blog.csdn.net/qq_33012981/article/details/114268332
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/3a4eaba071384555aab1de7218a9c268.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20210321171100315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx,size_16,color_FFFFFF,t_70#pic_center
[2021032117112094.png_pic_center]: https://img-blog.csdnimg.cn/2021032117112094.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20210321171140669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx,size_16,color_FFFFFF,t_70#pic_center
[springmvc_ServletModelAttributeMethodProcessor_ModelAttribute]: https://blog.csdn.net/qq_33012981/article/details/114230089
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20210321171200790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDEyOTgx,size_16,color_FFFFFF,t_70#pic_center
[springmvc_RequestResponseBodyMethodProcessor_RequestBody_ResponseBody]: https://blog.csdn.net/qq_33012981/article/details/113860575