Vue-axios使用post请求传递参数

于 2022-04-02 21:24:19 发布 4185 收藏 5
分类专栏： Vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lchuyan/article/details/123929125
版权

Vue-axios使用post请求传递参数


使用axios的get请求方式传递参数很是常规，这里不多做介绍。这两天做项目考虑使用restful风格处理前后端数据交互，当使用到post请求时，一直出现响应状态码为400的响应。
在这里插入图片描述

axios使用post请求

this.$http.post('api/staff/bindmailbox', { email: this.settingEmail.email, captcha: this.settingEmail.captcha })

由于出现400的响应码，我一直想着是前端使用axios的post请求传递参数的方式不对，所以没有考虑到后端代码，这里说明一种解决的方法（不排除有其他原因）
后端代码

public Map<String,Object> bindMailbox(@RequestBody String email, @RequestBody String captcha)

改为

public Map<String,Object> bindMailbox(@RequestBody String emailCaptcha)
然后使用gson工具对emailCaptcha进行解析，获取其中的email和captcha
这样就不会出现状态码为400的响应
基本信息
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决vue处理axios post请求传参的问题
11-28
很多朋友在使用vue的过程中肯定会用到axios 请求，包括现在vux中已经自带了axios，而且用法也很简单，文档中写的比较清楚，但是当我们使用post提交时，却发现有时候会出现参数没有发送到服务器的问题，我记得文档中也说了这一情况的出现，在这里我把这设置情况记录下来，方便下次需要的时候直接使用。不需要翻阅旧代码了。 下面是vux中的使用方式，很简单，把代码放置在main.js中就可以了。如果仅仅使用了vue的话，直接安装了axios的话，设置方式也雷同，就不记录了。 import qs from 'qs' import es6Promise from 'es6-promise' impo
vue中使用post请求传递params参数
xueyong0403的专栏
04-16 1万+
使用post请求时，通常只包含body的数据，但http协议并没有规定post协议不能传params参数，这就意味着一个post请求同时可以包含params和body两部分数据。在传递两部分参数时，一定要注意，body部分一定要转成字符串（JSON.stringify），否则浏览器会先发送一个options请求，进而引起405错误。 axios({ url:"***/Device/EditName", method:'post', data:JSON.stringify({username:...
vue使用axios发送post请求携带json body参数，后端使用@RequestBody进行接收
最新发布
见证自己学习,成长的记录
02-17 6770
最近在做自己项目中，做一个非常简单的新增用户场景，但是使用原生axios发送post请求的时候，还是踩了不少坑的。唉，说多了都是泪，小小一个新增业务，在自己前后端一起开发的时候，硬是搞了好久。下面就把问题总结分享下，防止后人再踩坑。首先先看下我的接口定义吧。其实就是一个很简单的新增，参数也不复杂。
vue中get或者post方法传递参数
Y_Cfeng的博客
03-28 2829
在与后端 对接进行数据传递时，通常会用到 GET，POST 方法进行参数提交，参数提交方式，通常取决于后端对数据的接收方式 Query String Parameters 当发起一次 GET 请求时，参数会以url String 的形式传递。即 ？后的字符串则为其请求参数，并以 & 作为分隔符 当发起一次POST请求时，若未指定content-type，则默认 content-type为 application/x-www-form-urlencoded;charset=UTF-8.参数以.
Axios post 传参的params 与data 的两种形式（根据java后台接口来选择）
bug收集
10-12 9731
前言 params是添加到url的请求字符串中的，一般用于get请求。 data是添加到请求体（body）中的， 一般用于post请求。 上面，只是一般情况. 其实，post请求也可以使用params方式传值 ，但是get请求没有data方式，本文就来介绍一下post的两种传值方式 Axios中posts的params与data的两种传参 第一种：data方式 this.$axios({ url: '/api/user/login' , method: 'post', ...
vue 项目post传参的几种方法
qq_44230631的博客
06-24 6214
post请求
vue中使用axios插件做post请求带参数
allen_csdns的博客
11-28 1552
在vue中使用axios发送post请求，参数方式 由于后台接收的参数格式为FormData格式， 在axios中参数格式默认为FormData格式 在axios中参数格式默认为 在传参数前，将原先官方提供的格式 改为如下： axios({ url: '../../../room/listRoomPage', method: 'post', data: {offset: 0, lim...
Vue中axios 表单POST提交
二十一克阳光！的博客
01-24 6491
刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题。 因为后端要求是按表单提交的形式给他数据， 我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下： axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .ca
VUE 之 Axios 的get和post前后端传参详解
qq_42552857的博客
03-21 1万+
vue axios请求方式和传参格式 http的get方法传递数组参数有两种形式 形式一: 通过逗号拼接query参数 http://localhost:8080/api?arr=1,2,3,4&name=1 形式二: 通过数组名+下标指定参数 http://localhost:8080/api?arr[0]=1&arr[1]=2 使用axios的get方法传递数组参数 形式一的解决方案 // 这里注意使用+''将参数转换成了字符串,
Vue ：axios请求post、get请求根据后参数类型进行传参（带token）
happy81997的博客
12-25 7069
axios请求post、get请求根据后参数类型的使用（带token） 一、get请求： get请求常见的参数类型（Parameter Type）是query， 传参过程： axios.get("/manage/project/staff/position/list", { params: { staffId: row.id, },
解决在Vue中使用axios POST请求变成OPTIONS的问题
01-19
引入完成之后使用qs改变传递的参数data，如下： 这样就可以了，post请求的时候就不会再出现OPTIONS了 补充知识：axios发起请求，为什么先发送options请求，再发送get/post请求 引起原因 1，跨域； 2，请求头非...
Vue中 axios delete请求参数操作
01-21
post和put有三个参数，url,data和config，所以在使用这两个时，可以写成axios.post(api,{id:1}),axios.put(api,{id:1}),但是delete只有两个参数：url和config，data在config中，所以需要写成 axios.delete(api,{data...
解决Vue axios post请求,后台获取不到数据的问题方法
01-19
最近做项目，需要用到vue,后台是php,第一次使用axios进行请求，本以为同ajax一样，会很简单，但是结果往往不让人满意啊，get请求很简单，这里就不说了，主要说下 post请求方式。 使用axios进行post请求，后台居然...
vue 使用axios 数据请求第三方插件的使用教程详解
12-04
为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS $ npm install qs 一个命令全部解决 $ npm install --save axios vue-axios qs
vue axios post发送复杂对象问题
10-16
现在vue项目中，一般使用axios发送请求去后台拉取数据。这篇文章主要介绍了vue axios post发送复杂对象的一点思考,需要的朋友可以参考下
vue axios post请求传递 FormData 类型参数
weixin_41786574的博客
03-21 1万+
参考链接： axios 上传file文件遇到的坑， no multipart boundary was found axios 封装使用、拦截特定请求、判断所有请求是否加载完毕 前端请求方法中 const formData = new FormData() formData.append('role', 1) formData.append('exc...
Vue和Axios的传参方式
sungancd的博客
07-30 3251
Vue和axios的传参方式： Vue的传参方式: 1.通过name来传递参数 在router下的index.js { path: '/hello', name: 'HelloWorld', component:HelloWorld, }, 在外部的对应的.vue中可以获取值 <h2>{{$route.name}}</h2> 2.通过v-bind:to的方式进行传参 name绑定跳转页面的名称 ，采取params:{key:value}
vue|axios发送post请求详解
热门推荐
qq_56430361的博客
04-07 1万+
axios发送Post请求 首先我们要知道发送一个请求体的时候我们要明确发送的类型是什么，常见的类型有三种 form-data application/json application/x-www-form-urlencoded 以上三种类型是进行数据传输的数据类型，我们知道在js代码中的对象都不是以上的三种形式,但是要进行数据传输必须将js对象转换为以上的三种格式之一,可是我刚接触axios发送请求的时候，有时候却可以直接传递一个js对象，就很疑惑，今天终于弄懂了，其实axios在底层帮我们做了转换，
Vue实战032：axios使用get和post发送各种请求
kevinfan的博客
07-28 2334
在前端中，提交数据的方式有很多种，如GET、POST、PUT、PATCH、DELETE、COPY、HEAD、OPTIONS、LINK、UNLINK、PURGE、LOCK、UNLOCK、PROPFIND、VIEW等请求方法,比较常用的有GET、POST、PUT、DELETE，今天主要分享下axios如何使用get和post发送请求。 什么是GET和POST请求 GET：向指定路径资源发送请求...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

基本信息

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值