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

news2024/11/24 8:00:47

今天发现一个问题:

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;
	}

}

  问题来源:

vue组件中无法正确接收并处理axios请求_前端-CSDN问答

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1666507.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【信号与槽机制】

信号与槽机制 &#x1f31f; 信号函数&#x1f31f; 槽函数&#x1f31f; 连接函数&#x1f338; QObejct::connect函数剖析&#x1f31f; 官方文档中给出的定义&#x1f31f;《Qt 5.9 C开发指南》中的定义 &#x1f31f; 信号函数 信号是一种特殊的成员函数&#xff0c;用于在…

JVM 类加载机制

JVM 类加载机制分为五个部分&#xff1a;加载&#xff0c;验证&#xff0c;准备&#xff0c;解析&#xff0c;初始化&#xff0c;下面我们就分别来看一下这五个过程。 加载 加载是类加载过程中的一个阶段&#xff0c;这个阶段会在内存中生成一个代表这个类的 java.lang.class 对…

用户管理中心——登录功能

用户管理中心——登录功能 一、用户登录1. 登录设计2. 登录方法实现实现细节逻辑删除实现代码 3. 登录接口实现4. 测试 二、用户管理用户管理接口 一、用户登录 1. 登录设计 2. 登录方法实现 实现细节 首先在接口中com.example.demo.service.UserService定义一个用户登录doL…

HSB色彩模式计算详解

HSB色彩模式计算详解 前些天撰文几篇介绍了几种圆形和矩形的HSB绘制方法。后2篇介绍了HSB的计算方法。我感到不是很详细&#xff0c;今再补充说明计算方法。 圆形H调色板选色,计算 Rad, ang, L&#xff0c; return H 计算二点距离 L&#xff0c;取色点到圆心距离 x0250;…

https://是怎么实现的?

默认的网站建设好后都是http访问模式&#xff0c;这种模式对于纯内容类型的网站来说&#xff0c;没有什么问题&#xff0c;但如果受到中间网络劫持会让网站轻易的跳转钓鱼网站&#xff0c;为避免这种情况下发生&#xff0c;所以传统的网站改为https协议&#xff0c;这种协议自己…

【牛客】SQL201 查找薪水记录超过15条的员工号emp_no以及其对应的记录次数t

1、描述 有一个薪水表&#xff0c;salaries简况如下&#xff1a; 请你查找薪水记录超过15条的员工号emp_no以及其对应的记录次数t&#xff0c;以上例子输出如下&#xff1a; 2、题目建表 drop table if exists salaries ; CREATE TABLE salaries ( emp_no int(11) NOT N…

【深入理解MySQL的索引数据结构】

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容&#x1f4d5;索引底层数据结构与算法&#x1f4d9;索引数据结构&#x1f4d8;二叉树&#x1f4d8;红黑树&#x1f4d8;Hash&#x1f4d8;B-Tree&#x1f4d8;BTree &#x1f4d9;表在不同存储引擎的存储结构&#x1f4d8;…

react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)

什么是 Context 机制&#xff1f; Context 机制是 react 实现外层组件向内层组件传值的一种方案&#xff0c;父组件可以向其内部的任一组件传值&#xff0c;无论是子组件还是孙组件或更深层次的组件。 实现步骤 1.使用createContext方法创建一个上下文对象 Ctx 2.在顶层组件中通…

基恩士PLC-KV5500基础入门

一、准备工作&#xff1a; 1.准备的东西&#xff1a;一个基恩士PLC-KV5500模块。两个自复位开关&#xff0c;24v LED灯一个&#xff0c;24v开关电源一个&#xff0c;KV5500端子台IO线缆&#xff1b;有编程软件的电脑一台。 编程软件&#xff1a; 基恩士PLC-KV5500接线图&…

妙笔生花,创作无限——WonderPen妙笔 for Mac

写作&#xff0c;是灵感的流淌&#xff0c;是心灵的独白。WonderPen妙笔 for Mac&#xff0c;为您的灵感插上翅膀&#xff0c;让您的创作更加流畅自如。它拥有简洁直观的界面设计&#xff0c;让您的思绪在纯净的写作环境中自由飞翔。多种写作模式&#xff0c;满足您不同的创作需…

vue2基础语法02——计算属性、方法、侦听器

vue2基础语法02——计算属性、方法、侦听器 1. 计算属性 computed1.1 为什么要用计算属性1.2 简单例子1.2.1 例子1.2.2 计算属性缓存 1.3 计算属性的 setter 2. 方法 methods2.1 例子2.2 说明2.3 简单方法替换实现 3. 侦听属性 watch3.1 介绍3.2 值的情况3.2.1 对应回调函数3.2…

halcon学习之一维测量基础

目录 创建测量矩形&#xff0c;获取测量句柄 gen_measure_rectangle2&#xff08;&#xff09; 使用句柄进行测量 measure_pos&#xff08;&#xff09; 修改参数Threshold 修改参数Transition 修改参数select 参数RowEdge&#xff0c;ColumnEdge&#xff0c;Distance …

KAN网络

目录 背景知识 什么是神经网络&#xff1f; 神经网络发展史 MP神经元模型 感知机模型 KAN 引言 MLP架构vsKAN架构 从数学定理方面来看&#xff1a; 从算法层面上看&#xff1a; 从实际应用过程看&#xff1a; KAN的架构细节 KAN的准确性 KAN的可解释性 监督学习…

验证搜索二叉树

目录 题目 方法一 思路 优化 方法二 思维误区 递归关系推导 代码实现 题目 98. 验证二叉搜索树 难度&#xff1a;中等 给你一个二叉树的根节点root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含…

虚幻五关卡制作学习笔记

1.创建一个移动平台 这个移动平台的功能&#xff1a;从箭头1移动到箭头2来回移动&#xff0c;可移动时发绿光&#xff0c;不可移动时发红光 首先&#xff0c;创建两个材质&#xff0c;发红光和绿光 然后我们创建一个actor蓝图类&#xff0c;添加两个arrow组件&#xff0c;两个…

设计模式-结构型-适配器模式-Adapter

地址类 public class Address {public void street() {System.out.println("普通的街道");}public void zip() {System.out.println("普通的邮政编码");}public void city() {System.out.println("普通的城市");} } 荷兰地址类 public class …

计算机服务器中了locked勒索病毒怎么解决,locked勒索病毒解密恢复工具

在网络技术飞速发展的时代&#xff0c;通过网络开展各项工作业务成为众多企业的首选&#xff0c;网络也为企业的生产运营提供了极大便利&#xff0c;大大提升了企业办公效率&#xff0c;但是利用网络避免不了网络威胁的存在&#xff0c;数据安全问题一直是企业关心的主要话题。…

【效率开发】游戏开发Debug效率方法总结

"程序员的一半生命都浪费在了调试上。" ——Brian Kernighan&#xff08;计算机科学家&#xff0c;曾参与开发C语言&#xff09; &#xff08;图片来源&#xff1a;forbesindia&#xff09; Debug无疑是程序员最头疼&#xff0c;也是耗费时间最多的一个环节&#xf…

智慧停车场管理系统主要组成

智慧泊车场办理体系&#xff0c;完成了泊车办理过程中的车辆类型分类、出场时的车牌辨认、行进路线的引导、空余车位诱导&#xff0c;以及准备离场前的反向寻车和方便缴费等全部环节。这六个流程中&#xff0c;泊车场对车辆的办理&#xff0c;进步了泊车场的运行效率&#xff0…

如何远程访问?

远程访问是指在不同的地理位置之间通过网络连接来实现对目标设备或系统的访问。无论是在个人生活还是商业领域&#xff0c;远程访问都起到了重要的作用&#xff0c;帮助人们实现高效的工作和便捷的生活。本文将介绍一款名为【天联】的组网产品&#xff0c;它是一款强大的异地组…