目录

前后端分离-前端传JSON后端接收到7B22...的问题解决

前后端分离 - 前端传JSON后端接收到%7B%22…的问题解决

前后端分离 - 前端传JSON后端接收到%7B%22…的问题解决

一、问题重现

https://i-blog.csdnimg.cn/blog_migrate/fd80ebaa25ef62480d689b480118253c.png#pic_center

1. 前端代码:

		//测试提交json
		$('.test').click(function () {
			let liaison = $('#liaison').val();
			let mobile = $('#mobile').val();
			let map = {
				"liaison": liaison,
				"mobile": mobile
			};
			let json = JSON.stringify(map);
			console.log(json);

			$.ajax({
				url: '/..../testJson',
				data: json,
				type: 'post',
				async: false,
				success: function (result) {
					console.log(result);
				}
			})

2. 后端代码

/**
	 * 测试json数据
	 */
	@PostMapping("/testJson")
	@ResponseBody
	public ApiResult testJson(@RequestBody String json){
		log.info("json =========== {}", json);
		return ApiResult.success();
	}

3. 发送数据后得到结果截图

3-1. 前端console.log

https://i-blog.csdnimg.cn/blog_migrate/2a2b10440940e8f772407a807e7a8575.png#pic_center

3-2. 后端 log.info

https://i-blog.csdnimg.cn/blog_migrate/f2156482a9b5a44d21a4dba8068acd3b.png#pic_center

二、出现原因

其实一看便知,是编码格式的问题。那么分两步走。

三、问题解决

1. 首先设置一下软件的编码格式,idea和webstorm一样设置

https://i-blog.csdnimg.cn/blog_migrate/b9b398e6be54338212292e9cb97ddf69.png#pic_center

2. 前端页面数据编码格式设置

很简单,在ajax里面添加一句 contentType 搞定,添加后的ajax是这样的

			$.ajax({
				url: '/..../testJson',
				data: json,
				type: 'post',
				async: false,
				contentType: 'application/json;charset=utf-8',
				success: function (result) {
					console.log(result);
				}
			})

四、结果截图

https://i-blog.csdnimg.cn/blog_migrate/1f89ac12711d78de60f182cdda0871ca.png#pic_center

END