Axios传递参数后端用@RequestParam_笋干zzZ~的博客-程序员秘密_axios requestparam

技术标签: java  小问题  vue.js  

Axios传递参数后端用@RequestParam:

Axios请求头中的Content-Type常见的有3种:

  1. Content-Type:application/json: 请求体中的数据会以json字符串的形式发送到后端(Axios默认)
  2. Content-Type:application/x-www-form-urlencoded:请求体中的数据会以普通表单形式(键值对)发送到后端
  3. Content-Type:multipart/form-data:它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。

Axios默认的Content-type是application/json;charset=UTF-8,如果想要以表单的形式传递参数,只要修改{headers:{‘Content-Type’:‘application/x-www-form-urlencoded’}}配置即可。

axios.post(url,{
    jobNumber: '430525', password: '123'}, {
    headers: {
    'Content-Type':'application/x-www-form-urlencoded'}});

但是,改完以后发送请求,后端怎么都接收不到传过去的参数。我们打开浏览器的调试工具,可以发现这里的form Data形式的参数是将我们想要传的参数整个当成是一个key,其对应的value也是空的。
Form Data应该是一个键值对的形式。
在这里插入图片描述
GET:
如果是使用GET的话,就不用设置Content-Type,因为不是请求体传参 。

1.使用?或url传参

//?
axios.get('/toData?id=1')
.then(res=>{
    
	console.log(res.data)
})
// url
axios.get('/toData/1')
.then(res=>{
    
	console.log(res.data)
})

2.用params传参

axios.get(url,{
    params:{
    jobNumber: '430525', password: '123'}});

POST:
1.使用URLSearchParams对象

let myParams = new URLSearchParams()
myParams.append('jobNumber', '430525')
myParams.append(' password': '123')

axios.post(url,myParams, {
    headers: {
    'Content-Type':'application/x-www-form-urlencoded'}});

2.使用qs库

//npm install qs / cnpm install qs (安装了淘宝镜像的才可以使用)
//qs.parse()是将URL解析成对象的形式
//qs.stringify()是将对象 序列化成URL的形式,以&进行拼接
import qs from 'qs';
axios.post(url,qs.stringify({
    jobNumber: '430525', password: '123'}), 
    {
    headers: {
    'Content-Type':'application/x-www-form-urlencoded'}}
);

再次调取接口可以发现,请求参数已经是我们想要的了。

在这里插入图片描述
补充:如果数据一个对象数组,那么使用qs应该怎么传递。
格式化数组参数的三种方法:

allowDots: true 有对象就点属性,没对象走下标。
在这里插入图片描述

qs.stringify({
     a: [{
    b:'c'},{
    d:'e'}] }, {
     arrayFormat: 'indices', allowDots: true})
//'a[0].b=c&a[1].d=e'

qs.stringify({
     a: [{
    b:'c'},{
    d:'e'}] }, {
     arrayFormat: 'brackets', allowDots: true})
//'a[].b=c&a[].d=e'

qs.stringify({
     a: [{
    b:'c'},{
    d:'e'}] }, {
     arrayFormat: 'repeat', allowDots: true})
//'a.b=c&a.d=e'



//以下证明用@RequestParam接收对象以及存放对象的集合不可取!!!

var users=[{
    jobNumber: '430525', password: '123'},{
    jobNumber: '123125', password: '123'}];
qs.stringify({
     users: this.users }, {
     arrayFormat: 'indices', allowDots: true})
//'users[0].jobNumber=430525&users[0].password=123&users[1].jobNumber=123125&users[1].password=123'

//如果不加allowDots: true的话
//'users[0][jobNumber]=430525&users[0][password]=123&users[1][jobNumber]=123125&users[1][password]=123'

qs.stringify({
     users: this.users }, {
     arrayFormat: 'brackets' })
//'users[][jobNumber]=430525&users[][password]=123&users[][jobNumber]=123125&users[][password]=123'

qs.stringify({
     users: this.users }, {
     arrayFormat: 'repeat', allowDots: true})
//'users.jobNumber=430525&users.password=123&users.jobNumber=123125&users.password=123'

//如果不加allowDots: true的话
//'users[jobNumber]=430525&users[password]=123&users[jobNumber]=123125&users[password]=123'


//使用@RequestParam去接收发现根本不行。记住:涉及到对象的都去用@RequestBody。
public String methodName (@RequestParam(value = "users[]") List<User> users) {
    }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sungancd/article/details/121395738

智能推荐

centos-7(1908)配置HTTPS_My name is TK的博客-程序员秘密_centos7 https

配置HTTPS什么是https?HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。HTTPS:全称:Hyper Text Transfer Protocol over Secure Socket Layer,则是以安全为目标的HTTP通道,简单讲是HTT...

2022保密教育线上培训考试 06_UX设计狂人的博客-程序员秘密

本文整理了部分保密培训试题,仅供参考。

PageRank算法改进_咕噜oo的博客-程序员秘密_改进pagerank

PageRank算法的应用PageRank 算法是 Google 搜索引擎进行网页排名的一种算法,那么它如何映射到其他领域?比如,我们如何在文献排名中应用PageRank算法呢?对文献的质量进行排序是对文献价值进行评估的一种重要手段,目的是为了方便人员在检索时查阅。统计文献的被引次数是一种非常直观的统计方式,在此基础之上,我们引入了 PageRank算法:该算法基于网页之间的链接关系评估网页的价值,由于互联网与文献引用网络之间存在着较大的相似性,所以基于文献之间的引用网络使用 PageRan_1671465600

【开发技巧】-- SpringBoot使用LogBook打印http请求、响应信息_muzi木子的博客-程序员秘密_logbook相关依赖

1. 什么是logbook?logbook是一个用于打印http请求信息的一个开源组件。2. 如何使用logbook? 【这里以SpringBoot项目为例】导入logbook相关maven依赖:&lt;!-- LogBook依赖 我这里的版本是 &lt;logbook.version&gt;1.13.0&lt;/logbook.version&gt; --&gt;&lt;depen...

c++ 用类模版实现链表(c++语言程序设计第四版示例代码)_m296731064的博客-程序员秘密

[code=&quot;c++&quot;]#include#includeusing namespace std;templateclass Node{private: Node * next;public: T data; //数据域 ...

TCP三次握手建立连接、四次挥手连接释放_Zhujinsi_3的博客-程序员秘密

第一次握手:客户端向服务端发送连接请求报文段,TCP报文段首部同步位SYN=1,初始序号seq=x。客户端进程进入同步发送状态。第二次握手:服务端收到连接请求报文段后,向客户端发送确认报文段。把TCP报文段首部SYN位和ACK位置为1,初始序号seq=y,确认号ack=x+1。服务端进入同步接收状态。第三次握手:客户端接收到确认报文段后,向服务端发送ACK报文段,ACK位置为1,初...

随便推点

SVM -支持向量机原理与实践之实践篇_CopperDong的博客-程序员秘密

SVM -支持向量机原理与实践之实践篇前言最近太忙,这几天还是抽空完成实践篇,毕竟所有理论都是为实践服务的,上一篇花了很大篇幅从小白的角度详细的分析了SVM支持向量积的原理,当然还有很多内容没有涉及到,例如支持向量回归,不敏感损失函数等内容,但是也不妨碍我们用支持向量机去实现一个分类系统,因为有了对前面说讲述知识的一定的了解,就可以很好的为我们这一篇的实践内容服务。

vue-cli3项目完整配置_kattiekattie的博客-程序员秘密_vue-cli3配置

一、项目目录二、vue.config.js需求:项目打包时,文件后缀增加时间戳(防止服务器缓存)加载less公共文件跨域代理const path = require("path");const Timestamp = new Date().getTime();module.exports = { configureWebpack: { output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】 filename: `[name].${Ti

Java反射操作私有成员或方法、实例化私有内部类_anlian523的博客-程序员秘密_私有内部类实例化

通过 类名.class 可以获得Class引用(前提是你可以import这个类,好处是使用.class来创建对Class对象的引用时,不会自动地初始化该Class对象)。通过 Class.forName(类名的全称) 也可以获得Class引用。递归地打印父类package com.prac;class A{}class B extends A {}class C ...

Python数据分析与展示(一):Numpy库入门-NdArray的生成,属性,方法,转换等_温别Serein的博客-程序员秘密

一、Numpy库简介NumPy是使用Python进行科学计算的一个基本库,其中机器学习的大部分算法都是调用该库实现。主要包括以下功能:一个强大的N维数组对象Array; 用于集成C / C ++和Fortran代码的工具; 实用的线性代数、傅里叶变换和随机数生成函数。相对于python自带的计算和存储方式而言,Numpy的方法效率更高,占用空间更小,是一个非常好的工具包。二、Numpy生成Ndarray 对象的方法1. np.array(list/tuple,dtype=np...

10个有用的php代码实例_wming3的博客-程序员秘密_php开发实例代码

一、黑名单过滤function is_spam($text, $file, $split = ':', $regex = false){ $handle = fopen($file, 'rb'); $contents = fread($handle, filesize($file)); fclose($handle); $lines = explode(

推荐文章

热门文章

相关标签