前端axios传参总结

简介: 该文介绍了在前后端分离的开发中,前端使用axios向后端Spring传递参数的两种主要方法。针对@RequestParam注解,推荐使用params传参,将参数格式化为x-www-form-urlencoded,或者使用FormData和qs.stringify。对于@RequestBody,Axios的data传参默认为JSON格式,直接传入对象即可。

   一、@RequestParam注解对应的axios传参方法

   1.1.params传参(推荐)

   1.2.FormData传参

   1.3.qs.stringfy传参

   二、@RequestBody的axios传参方法

前后端分离开发的场景下,开发人员的工作内容更加专注与专业,但是也产生了一些额外的沟通成本。比如:本文中为大家说明的前后端参数传递与接受方法。本文主要是面对前端使用axios,后端使用Spring进行参数接受的情况进行说明。在使用spring的时候,与前端配合开发,容易出现传参歧义的2个注解是

   @RequestParam注解,默认接收Content-Type: application/x-www-form-urlencoded编码格式的数据

   @RequestBody注解,默认接收JSON类型格式的数据。

很多的文章列举出参数传递失败的问题解决方案,在我看来都不够全面。在此我给大家总结一下

一、@RequestParam注解对应的axios传参方法

以下面的这段Spring java代码为例,接口使用POST协议,需要接受的参数分别是tsCode、indexCols、table。针对这个Spring的HTTP接口,axios该如何传参?有几种方法?我们来一一介绍。

<code class="language-plaintext hljs">@PostMapping("/line")

public List<? extends BaseEntity>commonEChart(@RequestParam String tsCode,

                                    @RequestParam String indexCols,

                                    @RequestParam String table){<!-- --></code>

1.1.params传参(推荐)

使用axios实例的params进行传参,就会将params参数格式化为x-www-form-urlencoded的格式,与后端参数一一对应即可传参成功。这也是我向大家推荐的传参方法!

<code class="language-plaintext hljs">returnrequest({

   url:'/chart/line',

   method:'post',

   params:{//注意这里的key是params

       tsCode,

       indexCols,

       table

   }})</code>

1.2.FormData传参

还可以使用js的FormData对象进行参数格式化,同样可以在Spring后端正确的使用@RequestParam注解进行参数接收。

<code class="language-plaintext hljs">let params =newFormData();

params.append('tsCode', tsCode);

params.append('indexCols', indexCols);

params.append('table', table);returnrequest({

   url:'/chart/line',

   method:'post',

   data: params   //注意这里的key是data})</code>

1.3.qs.stringfy传参

还可以使用qs.stringfy进行参数格式化,同样可以在Spring后端正确的使用@RequestParam注解进行参数接收。

<code class="language-plaintext hljs">import qs from "qs";returnrequest({

   url:'/chart/line',

   method:'post',

   data: qs.stringify({//注意这里的key是data

       tsCode,

       indexCols,

       table

   })})</code>

需要注意的是使用这种方法,需要手动设置header(Content-Type)

<code class="language-plaintext hljs">const service = axios.create({

   headers:{"Content-Type":"application/x-www-form-urlencoded"}});</code>

二、@RequestBody的axios传参方法

java代码部分如下所示,DemoModel类是一个实体类,包含名称tsCode,indexCols,table三个字符串成员变量。接收到的JSON格式参数会自动为demo对象的成员变量赋值。

<code class="language-plaintext hljs">@PostMapping("/line")

public List<? extends BaseEntity>commonEChart(@RequestBody DemoModel demo){<!-- --></code>

@RequestBody注解,默认接收JSON类型格式的数据。在axios中默认data传参就会默认使用JSON数据格式,所以不用额外的特殊处理。

<code class="language-plaintext hljs">returnrequest({

   url:'/chart/line',

   method:'post',

   data:{//注意这里的key是data

       tsCode,

       indexCols,

       table

   }})</code>


相关文章
|
26天前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
17 1
|
1月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
36 2
|
2月前
|
资源调度 前端开发 JavaScript
用 Axios 提升前端异步请求的效率
用 Axios 提升前端异步请求的效率
|
2月前
|
前端开发 JavaScript 安全
第十篇 Axios最佳实战:前端HTTP通信的王者之选
第十篇 Axios最佳实战:前端HTTP通信的王者之选
109 0
|
2月前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
113 0
|
2月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
70 1
|
22天前
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
22天前
|
前端开发 安全 NoSQL
技术笔记:Security前端页面配置
技术笔记:Security前端页面配置
|
2月前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
57 1
|
2月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战