Jquery ajax 访问SpringBoot Json的那些坑

来说说ajax访问的问题。

先看先大概情况。

后端是springboot搭建的环境，controller如下：

@SuppressWarnings({ "rawtypes", "unchecked" })
    @PostMapping(value = "/tasklistbytask")
    private Object taskListbyList(@RequestBody Map reqMap) {
    	log.info("----------------tasklistbylist-----------------");
		……

此时，前端用jquery的ajax方法后台，总是提示如下错误：

  WARN 3324 --- [nio-8082-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : 
Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

请求源码如下:

$(function () {
  var theTemplateScript = $("#example-template").html();  
  var theTemplate = Handlebars.compile(theTemplateScript);  
	$.ajax({
		url : '/tasklistbytask', 
		type : 'post',
		async:false, 
		data : {pageNum:'1',pageSize:'20'},
		dataType : 'json',
		success: function(result){
			  var theCompiledHtml = theTemplate(result);  
			  $('#tbody').append(theCompiledHtml); 
		},
		fail:function(e){
	
		},
		error:function(e){
	
		}
});
})

显然，springboot认为此次请求时通过'application/x-www-form-urlencoded;charset=UTF-8过来，通过抓包工具，也可以看到这一点。

 

同时，也可以看到，由于是post请求，json中的参数是以请求体的方式提交的。

接下来，查询jquery的文档，发现，此方式是默认的请求方式。

所以，修改请求方式：

$.ajax({
		url : '/tasklistbytask', 
		type : 'post',
		async:false, 
		data : {pageNum:'1',pageSize:'20'},
		contentType:'application/json',
		dataType : 'json',
		success: function(result){
			  var theCompiledHtml = theTemplate(result);  
			  $('#tbody').append(theCompiledHtml); 
		},
		fail:function(e){
	
		},
		error:function(e){
	
		}

此时，重新请求后台，又报错了：

WARN 3324 --- [nio-8082-exec-3] .w.s.m.s.DefaultHandlerExceptionResolver : 
Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unrecognized token 'pageNum': was expecting ('true', 'false' or 'null'); 
nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'pageNum': was expecting ('true', 'false' or 'null')
 at [Source: (PushbackInputStream); line: 1, column: 9]]

此时，去看下拦截器拦截到的请求。

可以看到请求已经变为json方式了，但实际上送的json并没有被解析。

最后，将data内容修改为

data : '{"pageNum":1,"pageSize":20}'

正经的json样式，请求成功！