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

一、问题重现

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

3-2. 后端 log.info

二、出现原因

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

三、问题解决

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

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);
				}
			})

四、结果截图

END