快捷導(dǎo)航

解決axios發(fā)送post請(qǐng)求,springMVC接收不到數(shù)據(jù)問題的處理

更新時(shí)間：2026年05月20日 10:38:08 作者：svygh123

文章主要討論了Vue組件無法正確接收和處理Axios請(qǐng)求的問題,并詳細(xì)描述了SpringMVC中使用@PathVariable、@RequestBody、@RequestParam的不同場(chǎng)景及其對(duì)應(yīng)的前端Axios寫法

vue組件中無法正確接收并處理axios請(qǐng)求

這個(gè)問題已經(jīng)困擾我好久了，在電腦面前坐了兩天只能確定前端應(yīng)該是正確的發(fā)送了請(qǐng)求，但發(fā)送請(qǐng)求后無法正確接受后端返回的數(shù)據(jù)。

問題：vue組件無法接受后端數(shù)據(jù)

錯(cuò)誤代碼如下：

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 {

}

網(wǎng)上找到也有類似未解決的：

Spring MVC的Controller里面使用了@RequestParam注解來接收參數(shù)，但是只在GET請(qǐng)求的時(shí)候才能正常訪問，在使用POST請(qǐng)求的時(shí)候會(huì)產(chǎn)生找不到參數(shù)的異常。原本好好的POST請(qǐng)求開始報(bào)400錯(cuò)誤，找不到REST服務(wù)，一般情況下報(bào)這種錯(cuò)誤多是由于POST請(qǐng)求時(shí)傳遞的參數(shù)不一致，但是這次不存在這種問題，百思不得其解啊。。。

還有這個(gè)：axios發(fā)送post請(qǐng)求，springMVC接收不到數(shù)據(jù)問題

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

代碼中是規(guī)定了請(qǐng)求方式POST，使用@RequestParam接收id參數(shù)。

然后前臺(tái)請(qǐng)求參數(shù)也對(duì),是這個(gè)形式的{id:111}，看起來沒錯(cuò)啊，參數(shù)名完全一樣，但是后臺(tái)報(bào)錯(cuò)Required String parameter 'id' is not present,說id參數(shù)必須傳過來。

分析問題

雖然前端傳遞的參數(shù)形式為{id: 111}，看起來id的參數(shù)名確實(shí)是一樣的，但是這個(gè)參數(shù)是作為請(qǐng)求的body而非作為普通參數(shù)或query parameter傳遞的。因此無法直接使用@RequestParam注釋接收它。

今天就倆解決一下吧：

SpringMVC 中 @PathVariable、@RequestBody、@RequestParam的使用場(chǎng)景以及對(duì)應(yīng)的前端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) {
	// 處理請(qǐng)求邏輯
	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"));
	// 處理請(qǐng)求邏輯
	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) {
	// 處理請(qǐng)求邏輯
	return "Hello, " + firstName + " " + lastName;
}

前臺(tái) 完整代碼：

<!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>

后臺(tái)核心代碼：

@RestController
@CrossOrigin
public class MySpringMvcController {
	
	@PostMapping("/endpoint1")
	public String handlePostRequest(@RequestParam("firstName") String firstName,
			@RequestParam("lastName") String lastName) {
		// 處理請(qǐng)求邏輯
		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"));
		// 處理請(qǐng)求邏輯
		return "Hello, " + firstName + " " + lastName;
	}
	
	@PostMapping("/endpoint3/{firstName}/{lastName}")
	@ResponseBody
	public String endpoint2(@PathVariable("firstName") String firstName,  
	         @PathVariable("lastName") String lastName) {
		// 處理請(qǐng)求邏輯
		return "Hello, " + firstName + " " + lastName;
	}

}