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页面文件中添加如下代码

在控制层的类中添加相应的方法
运行程序如下所示:

本文介绍了如何在SpringMVC中配置处理编码和请求方式的过滤器,以及设置前端控制器。通过创建Vue.js和Axios的Ajax请求,测试了SpringMVC对Ajax请求的处理。接着展示了使用`@RequestBody`注解从JSON格式的请求参数中获取数据,并创建了对应的实体类进行映射。最后,讨论了如何使用`@RequestBody`响应JSON格式的数据,包括两种不同的响应方式。整个过程强调了当有对应实体类时使用第一种方式,否则使用第二种方式。
561

被折叠的 条评论
为什么被折叠?



