<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.3</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>axios</artifactId>
<version>0.21.1</version>
</dependency>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<filter>
<filter-name>hiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>hiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-servlet.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
- 项目结构和说明

- html 页面代码
注意: 为 post
请求
因为 java 是通过 getParameter
进行获取,所以我们要通过 transformRequest
将数据转为 key=value&key1=value1
的形式,
也就是表单的提交方式,响应类型时 application/x-www-form-urlencoded
,这样 java 通过 _method
值区分请求方式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<script src="/webjars/axios/0.21.1/dist/axios.js"></script>
</head>
<body>
<h1>SpringMvc</h1>
<label>
姓名:<input type="text" name="name" id="j-name">
</label>
<label>
年龄:<input type="text" name="age" id="j-age">
</label>
<input type="button" value="提交" id="j-btn">
<script>
let btn = document.getElementById("j-btn");
btn.onclick = () => {
let name = document.getElementById("j-name").value;
let age = document.getElementById("j-age").value;
axios({
method: 'post',
url: '/hello01',
transformRequest: [(data, headers) => {
let aux = ""
for (let d in data) {
aux += encodeURIComponent(d) + "=" + encodeURIComponent(data[d]) + "&"
}
aux += "_method=put";
return aux;
}],
data: {
name: name,
age: age
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err)
});
};
</script>
</body>
</html>
@Controller
public class HelloController {
@PutMapping("/hello01")
@ResponseBody
public String hello( String name,
Integer age) {
System.out.println("name = " + name);
System.out.println("age = " + age);
return "hello world";
}
}