|
@ResponseBody注解的功能简单来说就是服务器返回什么，浏览器就接收什么，而不会经过视图解析器，例如return 一个User对象，浏览器就会收到一个User对象，但是会转换成json字符串，那么如果返回的是一个页面会返回什么呢？是会报错还是会返回一个页面呢？
答案是会返回一个页面的源码！！！！！
异步的优势还是很大的，如果我们只想局部的刷新一个页面，而不是返回整个页面就可以通过这种方式将数据传到浏览器，能提升效率。
我们先准备一下环境，pom导入一个thymelf和web就可以
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
?配置文件：
spring:
thymeleaf:
suffix: .html
prefix: classpath:/templates/
?controller
@Controller
public class UserController {
@RequestMapping("/user")
private String add(){
System.out.println("Hello world");
return "add";
}
}
?页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>你好</p>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/vue.js"></script>
</html>
?准备工作到这里结束，然后写一个异步方法，写一个路由，然后查看一下返回的数据
?一定要加responsebody注解，因为这里返回的是user对象
@ResponseBody
@PostMapping("/user/save")
private User saveUser(){
User user=new User();
user.setId(1);
user.setUsername("gao");
user.setPassword("123456");
return user;
}
?异步方法
var vue=new Vue({
el:"#app",
methods: {
saveUser: function () {
axios.post("/user/save",{}).then(function (res) {
console.log(res)
});
}
}
})
?我们可以看到返回的数据已经到了data中
Object { data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, request: XMLHttpRequest }
?
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
?
data: Object { username: "gao", id: 1, password: "123456" }
??
id: 1
??
password: "123456"
??
username: "gao"
??
<prototype>: Object { … }
?
headers: Object { connection: "keep-alive", "content-type": "application/json", date: "Thu, 14 Oct 2021 12:27:53 GMT", … }
?
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
?
status: 200
?
statusText: ""
?
<prototype>: Object { … }
?这就证明了我们返回什么浏览器就得到什么，返回页面可以自行测试，有几张图片没传上去，后续会传
|