1.准备工作
新建模块并将之前的依赖导入到该模块中
添加web模块
将之前模块中的配置文件复制到resources目录下
在web.xml中配置处理编码的过滤器、处理请求方式的过滤器、前端控制器
在java下创建控制层的类TestAjaxController
在再webapp的WEB-INF目录下创建templates目录
在webapp下创建js并添加相应的js文件
部署tomcat
运行结果如下所示:
2.测试SpringMVC处理ajax请求
在index文件中添加如下代码
<!DOCTYPEhtml>
<htmllang="en"xmlns:th="http://www.thymeleaf.org">
<head>
<metacharset="UTF-8">
<title>首页</title>
</head>
<body>
<divid="app">
<h1>这是index.html</h1>
<br/>
<inputtype="button"value="测试SpringMVC处理ajax请求"@click="testAjax()">
</div>
<!--引入js文件-->
<scripttype="text/javascript"th:src="@{/js/vue.js}"></script>
<scripttype="text/javascript"th:src="@{/js/axios.min.js}"></script>
<!--
axios({
url:"",//请求路径
method:"",//请求方式
//1.以name=value&name=value的方式发送的请求参数
//2.不管使用的请求方式是get或post,请求参数都会被拼接到请求地址后
//3.该方式的请求参数可以通过request.getParameter()获取
params:{},
//1以json格式发送的请求参数
//2.请求参数会被保存到请求报文的请求体传输到服务器
//3.该方式的请求参数不可以通过request.getParameter()获取
data:{}
}).then(response=>{
console.log(response.data());
});
-->
<!--创建vue对象-->
<scripttype="text/javascript">
varvue=newVue({
el:"#app",
methods:{
testAjax(){
axios.post(
"/springMVC_ajax_war_exploded/test/ajax?id=1001",
{username:"smith",password:"123321"}
).then(response=>{
console.log(response.data);
});
}
}
});
</script>
</body>
</html>
在控制层的TestAjaxController类中添加方法
运行程序如下所示:
3.使用@RequestBody注解处理json格式的请求参数
@RequestBody可以获取请求体信息,使用@RequestBody注解标识控制器方法的形参,当前请求的请求体就会为当前注解所标识的形参赋值
将之前的方法引入RequestBody注解并修改为如下方法所示:
运行程序如下所示:
控制台结果如下所示:
在index文件中添加一个按键
在再该文件下添加方法
在pom.xml文件中导入jackson的依赖
在springMVC的配置文件中开启mvc的注解驱动
创建一个实体类,添加属性并添加构造方法和set、get、toString方法等
在控制层的类中添加相应的方法和使用注解@RequestBody
第一种方式:
运行结果如下所示:
第二种方式:
运行结果如下所示:
注意:
注意有相对应的实体类就使用第一种,无相对应的实体类就使用第二种
4.使用@RequestBody注解响应json格式的数据
@RequestBody用于标识一个控制器方法,可以将该方法的返回值直接作为响应报文的响应体响应到浏览器
在index的文件中添加超链接
在控制器类中添加方法
运行程序如下所示:
在index中添加操作按键
并在index页面文件中添加如下代码
在控制层的类中添加相应的方法
运行程序如下所示: