1.前后端的交互
@RequestBody注解,将JSON 字符串转换为POJO对象,作用:用于获取请求体(按照http协议进行一个完整的封装,往往都是由请求头+请求体等组成)内容,不适用于Get请求方式
@ResponseBody注解 作用:该注解用于将Controller的方法返回的对象转换为json字符串返回给客户端
2.前端页面
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<title>Title</title>
<!-- 引入js文件 -->
<script src="./js/vue.js"></script>
<script src="./js/axios-0.18.0.js"></script>
</head>
<body>
<!-- vue管理的视图区域 -->
<div id="app">
<input type="button" value="你点我呀~~" @click="clickMe()">
<template v-for="user in userList">
<p>
<span>{{user.id}}</span>
<span>{{user.name}}</span>
<span>{{user.sex}}</span>
</p>
</template>
</div>
</body>
<script>
//创建Vue对象
var vue = new Vue({
el: '#app',
data:{
userList:[]
},
methods:{
clickMe:function () {
//发送ajax给服务器
//准备数据
var params = {id:100, name:'热巴', sex:'女'};
//发送ajax
axios.post("http://localhost:8080/ajax/testAjax.do", params).then( (response)=>{
//response 服务器返回数据的总对象( 响应对象, 服务器返回的数据在 response对象的data属性中)
console.log( response );
//把服务器返回的数据 赋值给Vue对象的模型中 userList
this.userList = response.data;
});
}
}
});
</script>
</html>
3.处理方法
//@Controller
//@ResponseBody
@RestController
@RequestMapping("ajax")
public class AjaxController {
//测试Ajax的方法
@RequestMapping("testAjax")
//@ResponseBody
public List<User> testAjax(@RequestBody User user){
//打印接受的数据
System.out.println("user = " + user);
//准备返回的User数据
User user1 = new User();
user1.setId(1);
user1.setName("王五");
user1.setSex("男");
User user2 = new User();
user2.setId(2);
user2.setName("赵六");
user2.setSex("女");
ArrayList<User> userList = new ArrayList<User>();
userList.add(user1);
userList.add(user2);
return userList;
}
}