jquery之ajax访问spring boot请求——使用@RequestBody
Spring Boot 2.5.3
jquery 1.10.2
jquery 1.12.4
---
使用S.B.开发了一个接口，如下：/test/call
@RestController
@RequestMapping(value="/test")
@Slf4j
public class TestController {
@PostMapping(value="/call")
public Map<String, Object> call(@RequestBody TestDTO dto) {
Map<String, Object> map = new HashMap<>();
map.put("id", dto.getId());
map.put("name", dto.getName());
return map;
}
}
import lombok.Data;
@Data
class TestDTO {
private Integer id;
private String name;
}
使用Postman访问：成功
但使用下面的前端代码访问时，出现了异常：
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body style="background-color:#ddd;">
<button id="submit">点击测试</button><br />
<label id="rtn"></label>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
console.log("opened");
});
$("#submit").click(function(){
console.log("clicked");
var url = "/test/call";
var data = '{"id":' + 10 + ',"name":"myname"}';
$.ajax({
type: "POST",
url: url,
data: data,
//headers:{'Content-Type':'application/json;charset=utf8'},
dataType: "json",
success: function (jdata, status) {
console.log("Status: " + status);
console.log(jdata);
$("#rtn").html("返回结果：" + JSON.stringify(jdata));
},
error: function (xhr, status) {
console.log("Status: " + status);
console.log(xhr);
window.alert("请求数据失败");
}
});
});
</script>
</body>
</html>浏览器控制台异常信息：
后台日志显示如下：
.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException:
Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]
请求头错误了！
解决方法：
jQuery的ajax请求中有一个 headers字段，将其添加上即可。
headers:{'Content-Type':'application/json;charset=utf8'},是headers，因此，可以添加多个请求头。
添加后的测试结果：控制台输出、页面展示，成功
更进一步：ajax方法中，除了使用 headers，还可以直接使用 contentType。
$.ajax({
type: "POST",
url: url,
data: data,
// 方式1
//headers:{'Content-Type':'application/json;charset=utf8'},
// 方式2
contentType: "application/json;charset=utf8",注，上面的方式1、2可以同时存在。
更改后测试：成功。
补充说明：
页面使用了 <meta charset="utf-8">，因此，上面 headers、contentType 中的 “;charset=utf8” 可以去掉。
疑问：jQuery的post方法怎么实现同样的功能呢？
如下：
升级前面的jQuery版本：
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>使用 $.post方法：
$.post({
url: url,
data: data,
headers:{'Content-Type':'application/json;charset=utf8'},
dataType: "json",
success: function (jdata, status) {
console.log("Status: " + status);
console.log(jdata);
$("#rtn").html("返回结果：" + JSON.stringify(jdata));
},
error: function (xhr, status) {
console.log("Status: " + status);
console.log(xhr);
window.alert("请求数据失败");
}
});官方文档中，上面这种方式（jQuery.post( [settings ] )）是 jQuery 1.12-and-2.2 有的：
》》》全文完《《《
参考文档
3、报错： Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]
4、jQuery CDN – Latest Stable Versions
5、
