脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → 解决axios发送post请求,springMVC接收不到数据问题

解决axios发送post请求,springMVC接收不到数据问题的处理

 更新时间：2026年05月20日 10:38:08   作者：svygh123  
文章主要讨论了Vue组件无法正确接收和处理Axios请求的问题,并详细描述了SpringMVC中使用@PathVariable、@RequestBody、@RequestParam的不同场景及其对应的前端Axios写法

今天发现一个问题：

vue组件中无法正确接收并处理axios请求

这个问题已经困扰我好久了，在电脑面前坐了两天只能确定前端应该是正确的发送了请求，但发送请求后无法正确接受后端返回的数据。

问题：vue组件无法接受后端数据

错误代码如下：

axios.post("/simple_query",{
},this.simple_query_input).then(res=>{    
    console.log(res);
}).catch(err=>{
    console.log(err);
})
@RequestMapping(value = "/simple_query",method = RequestMethod.POST)
public cheName handleSimpleQuery(@RequestParam("simple_query_input") String simpleQueryInput) throws Exception {

}

网上找到也有类似未解决的：

Spring MVC的Controller里面使用了@RequestParam注解来接收参数，但是只在GET请求的时候才能正常访问，在使用POST请求的时候会产生找不到参数的异常。原本好好的POST请求开始报400错误，找不到REST服务，一般情况下报这种错误多是由于POST请求时传递的参数不一致，但是这次不存在这种问题，百思不得其解啊。。。

还有这个：axios发送post请求，springMVC接收不到数据问题

@RequestMapping(method = RequestMethod.POST, value = "/test")
@ResponseBody
public ResponseEntity testDelete(@RequestParam("id") Integer id)
        throws Exception {
    return ResponseEntity.ok();
}

代码中是规定了请求方式POST，使用@RequestParam接收id参数。

然后前台请求参数也对,是这个形式的{id:111}，看起来没错啊，参数名完全一样，但是后台报错Required String parameter 'id' is not present,说id参数必须传过来。

分析问题

虽然前端传递的参数形式为{id: 111}，看起来id的参数名确实是一样的，但是这个参数是作为请求的body而非作为普通参数或query parameter传递的。因此无法直接使用@RequestParam注释接收它。

今天就俩解决一下吧：

SpringMVC 中 @PathVariable、@RequestBody、@RequestParam的使用场景以及对应的前端axios写法是什么呢？

一、@PathVariable

axios代码：

axios.post('http://localhost:8080/endpoint3/' + this.firstName + '/' + this.lastName)
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

SpringMvc的controller代码：

@PostMapping("/endpoint3/{firstName}/{lastName}")
@ResponseBody
public String endpoint2(@PathVariable("firstName") String firstName,  
         @PathVariable("lastName") String lastName) {
	// 处理请求逻辑
	return "Hello, " + firstName + " " + lastName;
}

二、@RequestBody

axios代码：

axios.post('http://localhost:8080/endpoint2', {firstName: this.firstName, lastName: this.lastName})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

SpringMvc的controller代码：

@PostMapping("/endpoint2")
@ResponseBody
public String endpoint2(@RequestBody Map<String, Object> requestBody) {
	String firstName = Objects.toString(requestBody.get("firstName"));
	String lastName = Objects.toString(requestBody.get("lastName"));
	// 处理请求逻辑
	return "Hello, " + firstName + " " + lastName;
}

三、@RequestParam

axios代码：

const formData = new FormData();
formData.append('firstName', this.firstName);
formData.append('lastName', this.lastName);
axios.post('http://localhost:8080/endpoint1', formData)
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

SpringMvc的controller代码：

@PostMapping("/endpoint1")
public String handlePostRequest(@RequestParam("firstName") String firstName,
		@RequestParam("lastName") String lastName) {
	// 处理请求逻辑
	return "Hello, " + firstName + " " + lastName;
}

前台 完整代码：

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.min.js"></script>
</head>
<body>
	<div id="app">
		
	</div>
	<script>
			new Vue({
			  el: '#app',
			  data () {
				return {
				  firstName: "John",
				  lastName: "Doe"
				}
			  },
			  mounted () {
				  const formData = new FormData();
				  formData.append('firstName', this.firstName);
				  formData.append('lastName', this.lastName);
				  axios.post('http://localhost:8080/endpoint1', formData)
					.then(response => {
					  console.log(response.data);
					})
					.catch(error => {
					  console.error(error);
					});	

					axios.post('http://localhost:8080/endpoint2', {firstName: this.firstName, lastName: this.lastName})
					.then(response => {
					  console.log(response.data);
					})
					.catch(error => {
					  console.error(error);
					});	

					axios.post('http://localhost:8080/endpoint3/' + this.firstName + '/' + this.lastName)
					.then(response => {
					  console.log(response.data);
					})
					.catch(error => {
					  console.error(error);
					});	

			  }
			})
	</script>

</body>

后台核心代码：

@RestController
@CrossOrigin
public class MySpringMvcController {
	
	@PostMapping("/endpoint1")
	public String handlePostRequest(@RequestParam("firstName") String firstName,
			@RequestParam("lastName") String lastName) {
		// 处理请求逻辑
		return "Hello, " + firstName + " " + lastName;
	}
	
	@PostMapping("/endpoint2")
	@ResponseBody
	public String endpoint2(@RequestBody Map<String, Object> requestBody) {
		String firstName = Objects.toString(requestBody.get("firstName"));
		String lastName = Objects.toString(requestBody.get("lastName"));
		// 处理请求逻辑
		return "Hello, " + firstName + " " + lastName;
	}
	
	@PostMapping("/endpoint3/{firstName}/{lastName}")
	@ResponseBody
	public String endpoint2(@PathVariable("firstName") String firstName,  
	         @PathVariable("lastName") String lastName) {
		// 处理请求逻辑
		return "Hello, " + firstName + " " + lastName;
	}

}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Spring中配置和读取多个Properties文件的方式方法

    Spring中配置和读取多个Properties文件的方式方法

    本篇文章主要介绍了Spring中配置和读取多个Properties文件的方式方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • java &与&&的区别及实例

    java &与&&的区别及实例

    这篇文章主要介绍了java &与&&的区别的相关资料,并附简单实例，帮助大家学习理解这部分知识，需要的朋友可以参考下
    2016-10-10
  • Flowable流程引擎API与服务

    Flowable流程引擎API与服务

    这篇文章主要介绍了Flowable流程引擎API与服务,引擎API是与Flowable交互的最常用手段,总入口点是ProcessEngine,使用ProcessEngine,可以获得各种提供工作流或BPM方法的服务,下面我们来详细了解
    2023-10-10
  • springboot2中HikariCP连接池的相关配置问题

    springboot2中HikariCP连接池的相关配置问题

    这篇文章主要介绍了springboot2中HikariCP连接池的相关配置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Java并发工具类Phaser详解

    Java并发工具类Phaser详解

    这篇文章主要介绍了Java并发工具类Phaser详解,Phaser(阶段协同器)是一个Java实现的并发工具类,用于协调多个线程的执行,它提供了一些方便的方法来管理多个阶段的执行,可以让程序员灵活地控制线程的执行顺序和阶段性的执行,需要的朋友可以参考下
    2023-11-11
  • Java切面(Aspect)的多种实现方式

    Java切面(Aspect)的多种实现方式

    这篇文章主要给大家介绍了关于Java切面(Aspect)的多种实现方式,在Java开发中切面(Aspect)是一种常用的编程方式,用于实现横切关注点(cross-cutting concern),需要的朋友可以参考下
    2023-08-08
  • SpringBoot的自动装配机制和Starter的实现原理分析

    SpringBoot的自动装配机制和Starter的实现原理分析

    SpringBoot自动装配机制通过`@EnableAutoConfiguration`开启,基于条件化配置实现,简化开发,Starter作为“开箱即用”的依赖模块,包含库依赖、自动配置类和附加配置,自动装配与Starter结合,用户只需引入Starter即可获得完整功能,提升开发效率
    2026-05-05
  • Java 9中List.of()的使用示例及注意事项

    Java 9中List.of()的使用示例及注意事项

    Java 9引入了一个新的静态工厂方法List.of(),用于创建不可变的列表对象,这篇文章主要介绍了Java 9中List.of()的使用示例及注意事项的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • MyBatis插入Insert、InsertSelective的区别及使用心得

    MyBatis插入Insert、InsertSelective的区别及使用心得

    这篇文章主要介绍了MyBatis插入Insert、InsertSelective的区别及使用心得，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-12-12
  • MyBatis配置文件元素示例详解

    MyBatis配置文件元素示例详解

    在MyBatis框架的核心配置文件中，<configuration>元素是配置文件的根元素，其他元素都要在<contiguration>元素内配置，这篇文章主要介绍了MyBatis配置文件元素,需要的朋友可以参考下
    2023-06-06

最新评论