SpringMVC处理ajax请求

1.准备工作

新建模块并将之前的依赖导入到该模块中

SpringMVC处理ajax请求_第1张图片

添加web模块 

SpringMVC处理ajax请求_第2张图片

将之前模块中的配置文件复制到resources目录下 

SpringMVC处理ajax请求_第3张图片

在web.xml中配置处理编码的过滤器、处理请求方式的过滤器、前端控制器 

SpringMVC处理ajax请求_第4张图片

在java下创建控制层的类TestAjaxController 

SpringMVC处理ajax请求_第5张图片

在再webapp的WEB-INF目录下创建templates目录 

SpringMVC处理ajax请求_第6张图片

在webapp下创建js并添加相应的js文件 

SpringMVC处理ajax请求_第7张图片

部署tomcat 

SpringMVC处理ajax请求_第8张图片

运行结果如下所示: 

SpringMVC处理ajax请求_第9张图片

2.测试SpringMVC处理ajax请求

在index文件中添加如下代码

html>

<htmllang="en"xmlns:th="http://www.thymeleaf.org">

<head>

<metacharset="UTF-8">

<title>首页title>

head>

<body>

<divid="app">

<h1>这是index.htmlh1>

<br/>

<inputtype="button"value="测试SpringMVC处理ajax请求"@click="testAjax()">

div>

<scripttype="text/javascript"th:src="@{/js/vue.js}">script>

<scripttype="text/javascript"th:src="@{/js/axios.min.js}">script>

<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类中添加方法

SpringMVC处理ajax请求_第10张图片

运行程序如下所示: 

SpringMVC处理ajax请求_第11张图片

 

 3.使用@RequestBody注解处理json格式的请求参数

@RequestBody可以获取请求体信息,使用@RequestBody注解标识控制器方法的形参,当前请求的请求体就会为当前注解所标识的形参赋值

将之前的方法引入RequestBody注解并修改为如下方法所示:

SpringMVC处理ajax请求_第12张图片

运行程序如下所示: 

SpringMVC处理ajax请求_第13张图片

控制台结果如下所示: 

SpringMVC处理ajax请求_第14张图片 

在index文件中添加一个按键 

在再该文件下添加方法 

SpringMVC处理ajax请求_第15张图片

在pom.xml文件中导入jackson的依赖 

SpringMVC处理ajax请求_第16张图片

在springMVC的配置文件中开启mvc的注解驱动 

创建一个实体类,添加属性并添加构造方法和set、get、toString方法等 

SpringMVC处理ajax请求_第17张图片

在控制层的类中添加相应的方法和使用注解@RequestBody 

第一种方式:

运行结果如下所示: 

SpringMVC处理ajax请求_第18张图片

 

第二种方式: 

运行结果如下所示: 

SpringMVC处理ajax请求_第19张图片

注意:

注意有相对应的实体类就使用第一种,无相对应的实体类就使用第二种 

 4.使用@RequestBody注解响应json格式的数据

@RequestBody用于标识一个控制器方法,可以将该方法的返回值直接作为响应报文的响应体响应到浏览器

在index的文件中添加超链接

 

在控制器类中添加方法 

SpringMVC处理ajax请求_第20张图片

运行程序如下所示: 

SpringMVC处理ajax请求_第21张图片

SpringMVC处理ajax请求_第22张图片 

在index中添加操作按键 

并在index页面文件中添加如下代码 

SpringMVC处理ajax请求_第23张图片

SpringMVC处理ajax请求_第24张图片 

在控制层的类中添加相应的方法SpringMVC处理ajax请求_第25张图片 

运行程序如下所示: 

SpringMVC处理ajax请求_第26张图片

 

你可能感兴趣的:(SpringMVC,spring,mvc,ajax)