POST请求(Form Data格式 )后端拿不到值的解决方法

26 篇文章 0 订阅

1.需求
后台要求请求头是Content-Type:application/x-www-form-urlencoded(设置请求头的意思是告诉后端传过去的数据是原生的表单格式,但是并没有改变传给后端的数据格式,所以需要对数据格式进行转换)

2.方法
解决方法一:

  • 安装qs插件
  • 在main中引入import qs from ‘qs’;
  • 将传给后端的参数进行转化qs.stringify({key1:value1,key2:value2,key3:value3});
    解决方法二:
  • 创建一个表单对象let formData = new FormData();
  • formData.append(‘str’, JSON.stringify(this.$store.state.HonourValue));str是key,后面的是值
  • 将formData作为参数传值给后端
  • 解决方法三:
  • 后端解决:在请求参数使用@RequestBody注解替代@RequestParam
  • @ResponseBody
  • @RequestMapping(value="/save",method=RequestMethod.POST)
    public Map<String, String> save(@RequestBody Student student)//自动将参数封装成student对象

3.现象

没有进行转换后的请求参数的数据格式,如图:会是request Paload 并且数据是对象{ }。
在这里插入图片描述

进行转换后的请求参数的数据格式,如图:会是Form Data 并且数据不是对象。
在这里插入图片描述
4.出现该问题的原因:
请求的Content-Type设置为application/x-www-form-urlencoded,那么这个Post请求被认为是HTTP POST表单请求,参数出现在form data,参数形式是key=value&key1=value1这种形式,后端获取使用@RequestParam; 其他情况如使用原生AJAX的POST请求如果不指定请求头Request Header,默认使用的Content-Type是text/plain;charset=UTF-8,或者application/json ,参数出现在Request payload块,其参数形式是标准的json格式,使用@RequestParam无法获取,需要使用@RequestBody获取。
在axios使用Post发送数据时,默认是直接把json放到请求体中提交到后端的,属于上述的第二种方式,需要将Request payload转换。

  • 5
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你在 Vue 3 使用 axios 或者 fetch API 发送 POST 请求传递多个参数,但是在后端无法取这些参数的,可能是因为请求头未设置正确导致的。 在使用 axios 或者 fetch API 发送 POST 请求时,需要设置请求头的 Content-Type 为 application/x-www-form-urlencoded。这样服务器才能正确解析请求的参数。 以下是设置请求头的示例代码: ```javascript import axios from 'axios'; const data = { param1: 'value1', param2: 'value2', param3: 'value3' }; axios.post('/api/endpoint', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 在上面的示例,我们通过在 axios.post() 方法的第三个参数设置 headers 来设置请求头,其 Content-Type 设置为 application/x-www-form-urlencoded。 如果你使用的是 fetch API,可以使用 Request 对象来设置请求头。以下是使用 fetch API 发送 POST 请求并设置请求头的示例代码: ```javascript const data = new URLSearchParams(); data.append('param1', 'value1'); data.append('param2', 'value2'); data.append('param3', 'value3'); fetch('/api/endpoint', { method: 'POST', body: data, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(response => { console.log(response); }) .catch(error => { console.log(error); }); ``` 在上面的示例,我们使用了 URLSearchParams 对象来构造请求体,并通过设置 headers 属性来设置请求头。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值