最近用vue  做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况:

后来仔细对比发现axios传值是这样的:

而 ajax 传值是这样的:

一个 Request Payload ,  一个Form data.

将Request payload 转为 from data 格式就可以了。有四种方式:

一:使用qs(推荐)

首先在你的项目里安装qs 模块。

npm install qs --save-dev

然后在需要使用的页面引入一下:

import qs from 'qs'

引入好了之后,把上面的postData用qs转一下再发送给后台就可以了:

let postData = qs.stringify({
certificationAccount: that.certificationAccount,
balance: that.balance
})

这样发送给后台时就是Format Data格式了。

二:使用URLSearchParams ;

let postData= new URLSearchParams()
postData.append('certificationAccount', that.certificationAccount)
postData.append('balance', that.balance)

这样也可以,个人觉得写起来麻烦。

三、直接使用字符串

let postData ='certificationAccount =' + that.certificationAccount + '&balance=' + that.balance

 es6写法:

let postData = `
certificationAccount = ${that.certificationAccount}&balance=${that.balance}
`

 四:JSON.stringify()

vue --- axios发post请求后台接收不到参数的三种解决方案的更多相关文章

  1. 微信小程序:使用wx.request()请求后台接收不到参数

    问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...

  2. Vue简单封装axios—解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...

  3. axios post请求后台接收不到参数 和 一些配置问题

    原因: axios 的 headers的 content-type  默认是 “application/json ”,传给后台的格式是这样的: 但是后台接收数据的格式一般是表单格式的,就是formda ...

  4. spring mvc从后台往前台传参数的三种方式

    第一种:使用Model对象(常用) 第一步:使用model对象往前台传递数据 第二步:在jsp中接收从后台传递过来的参数 第二种:使用HttpServletRequest对象 第一步:使用HttpSe ...

  5. MFC接收命令行参数的三种方法

    方法一: CString sCmdline = ::GetCommandLine(); AfxMessageBox(sCmdline); 将获取到 "C:\test\app.exe -1 - ...

  6. axios发送post请求后台接受不到问题

    axios发送post请求后台接受不到问题 1.首先这是前端的问题 2.解决方案不唯一,但这招肯定行 <!DOCTYPE html> <html> <head> & ...

  7. YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法

    上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...

  8. struts2 Action 接收参数的三种方法

    刚学Struts2 时 大家可能遇到过很多问题,这里我讲一下Action 接收参数的三种方法,我曾经在这上面摔过一回.所以要警醒一下自己..... 第一种:Action里声明属性,样例:account ...

  9. SpringBoot接收前端参数的三种方法

    都是以前的笔记了,有时间就整理出来了,SpringBoot接收前端参数的三种方法,首先第一种代码: @RestController public class ControllerTest { //访问 ...

随机推荐

  1. [Vijos P1369]难解的问题

    题目大意:给你一个序列,叫你求最长上升子序列长度,但必须包含第k项. 解题思路:我们把k左边的比a[k]大的数去掉,k右边的比k小的数去掉,就可以保证选到a[k]了(因为左边的数小于a[k],而a[k ...

  2. Linux Kernel 5.1 RC5发布

    我们距离正式的Linux 5.1内核发布还有不到一个月的时间,而今天Linus Torvalds宣布推出预期的Linux Kernel 5.1 RC5版本.Linus Torvalds专门评论了Lin ...

  3. python学习--导入自己的包

    定义一个自己的方法包: def myFunc(x): if x > 10: return x else: return -x 在需要的地方导入包: # 导入自定义的方法包 from learn ...

  4. ifram 实现左侧菜单,右侧显示内容

    一般都是左侧的导航栏中的a标签中写一个target(a标签有target属性), 右侧的div标签中写一个iframe,在iframe中有name的属性,在左侧a标签中的target写上iframe中 ...

  5. 集团公司(嵌入ETL工具)財务报表系统解决方式

    集团公司(嵌入ETL工具)財务报表系统解决方式 一.项目背景: 某集团公司是一家拥有100多家子公司的大型集团公司,旗下子公司涉及各行各业,包含:金矿.铜矿.房产.化纤等.因为子公司在业务上的差异.子 ...

  6. Android与设计模式——单例(Singleton)模式

    概念: java中单例模式是一种常见的设计模式.单例模式分三种:懒汉式单例.饿汉式单例.登记式单例三种. 单例模式有一下特点: 1.单例类仅仅能有一个实例. 2.单例类必须自己自己创建自己的唯一实例. ...

  7. IIC总线协议基础1

    文档类别 文档标识 IIC总线协议基础1 当前版本号 V0.2 作    者 Louis 完毕时间 2015-05-27 IIC总线协议基础1 IIC总线协议基础1. 1.            II ...

  8. A. Ilya and Diplomas( Codeforces Round #311 (Div. 2) )

    A. Ilya and Diplomas time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. 51nod-1131: 覆盖数字的数量

    [传送门:51nod-1131] 简要题意: 给出A,B,表示有一个区间为A到B 给出X,Y,表示有一个区间为X到Y 求出X到Y中能够被A到B中的数(可重复)相加得到的不同的数的个数 题解: 乱搞题, ...

  10. 如何设置eclipse代码自动提示功能

    如何设置eclipse代码自动提示功能 我们在刚安装完使用eclipse进行开发时,会发现没有代码提示会非常的不方便,下面小编将告诉你如何进行代码自动提示的设置. 工具/原料   eclipse 电脑 ...