SpringMVC处理Ajax请求及处理和响应json格式的数据
在SpringMVC中处理Ajax的请求可以用到@RequestBody与@ResponseBody注解实现
1.@RequestBody:将请求体中的内容和控制器方法的形参进行绑定
2.使用@RequestBody注解将json格式的请求参数转换程Java对象（三个步骤）
a>导入Jackson的依赖
b>在SpringMVC的配置文件中设置开启mvc的注解驱动：mvc:annotation-driven/
c>在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的Java类型的形参,使用@RequestBody注解标识即可
3.@ResponseBody:将所标识的控制器方法返回值作为响应报文的响应体响应到浏览器
4.使用@ResponseBody响应浏览器json格式的数据（三个步骤）
a>导入Jackson的依赖
b>在SpringMVC的配置文件中设置开启mvc的注解驱动：mvc:annotation-driven/
c>将需要转换为json字符串的Java对象直接作为控制器方法的返回值，使用@ResponseBody注解标识控制器方法就可以将Java对象直接转换为json字符串，并响应到浏览器
5.@RestController注解
这个注解以后会使用的多
@RestController注解是springMVC提供的一个复合注解，标识在控制器的类上，就相当于为类添加了
@Controller注解，并且为其中的每个方法添加了@ResponseBody注解
6.常用的Java对象转换为json的结果：
实体类–》json对象
map–》json对象
list–》json数组
下面是实例的代码：
首先在maven工程里创建新的module（其他方式均可），然后在pom文件中导入依赖，在其中包括我们上文所写到的jackson的依赖，然后配置web里的web.xml编码过滤器、处理请求方式过滤器以及SpringMVC的前端控制器。之后就可以在jsp中写例子以及axios的代码，然后在controller里处理实现。另外我们在响应给json格式数据时，我们在这里创建了一个User类。
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<context:component-scan base-package="com.qcw.controller"/>
<bean id="viewResolver"
class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
<property name="order" value="1"/>
<property name="characterEncoding" value="UTF-8"/>
<property name="templateEngine">
<bean class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="templateResolver">
<bean
class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
<property name="prefix" value="/WEB-INF/templates/"/>
<property name="suffix" value=".html"/>
<property name="templateMode" value="HTML5"/>
<property name="characterEncoding" value="UTF-8" />
bean>
property>
bean>
property>
bean>
<mvc:default-servlet-handler/>
<mvc:annotation-driven/>
<mvc:view-controller path="/" view-name="index">mvc:view-controller>
beans>
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页title>
head>
<body>
<div id="app">
<h1>index.htmlh1>
<input type="button" value="测试SpringMVC处理Ajax请求" @click="testAjax()"><br>
<input type="button" value="使用@RequestBody注解处理json格式的请求参数" @click="testRequestBody()"><br>
<a th:href="@{/test/ResponseBody}">测试@ResponseBody注解响应浏览器数据a><br>
<input type="button" value="使用@ResponseBody注解响应json格式的数据" @click="testResponseBody()"><br>
div>
<script type="text/javascript" th:src="@{/js/vue.js}">script>
<script type="text/javascript" th:src="@{/js/axios.min.js}">script>
<script type="text/javascript">
/**
*axios({
url:"", //请求路径
method:"", //请求方式（以name=value&name=value的方式发送的请求参数，
//-无论使用的请求方式get还是post，请求参数都会被拼接到请求地址后）
//-此种方式的请求参数可以通过request.getParameter()获取
params:{}, //请求方式（以json格式发送的请求参数
//-请求参数会被保存到请求报文的请求体传输到服务器）
//-此种方式的请求参数不可以通过request.getParameter()获取
data:{}
}).then(response=>{
console.log(response.data);
});
*/
var vue = new Vue({
el:"#app",
data:{},
methods:{
testAjax(){
axios.post(
"/SpringMVC/test/ajax?id=1001",
{username:"admin",password:"123456"}
).then(response=>{
console.log(response.data);
});
},
testRequestBody(){
axios.post(
"/SpringMVC/test/RequestBody/json",
{username:"admin",password:"123456",age:23,gender:"男"}
).then(response=>{
console.log(response.data);
});
},
testResponseBody(){
axios.post("/SpringMVC/test/ResponseBody/json").then(response=>{
console.log(response.data);
});
}
}
});
script>
body>
html>
package com.qcw.controller;
/**
* @author wqc
* @date 2022/9/30 15:25
* Description:
* 1.@RequestBody:将请求体中的内容和控制器方法的形参进行绑定
* 2.使用@RequestBody注解将json格式的请求参数转换程Java对象
* a>导入Jackson的依赖
* b>在SpringMVC的配置文件中设置开启mvc的注解驱动： testResponseBodyJson(){
// User user1 = new User(1001,"admin1","123456",20,"男");
// User user2 = new User(1002,"admin2","123456",20,"男");
// User user3 = new User(1003,"admin3","123456",20,"男");
// Map map = new HashMap();
// map.put("1001",user1);
// map.put("1002",user2);
// map.put("1003",user3);
// return map;
// }
// public User testResponseBodyJson(){
// User user = new User(1001,"admin","123456",20,"男");
// return user;
// }
}