vue --- axios发post请求后台接收不到参数的三种解决方案
最近用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请求后台接收不到参数的三种解决方案的更多相关文章
- 微信小程序:使用wx.request()请求后台接收不到参数
问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...
- Vue简单封装axios—解决post请求后端接收不到参数问题
1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...
- axios post请求后台接收不到参数 和 一些配置问题
原因: axios 的 headers的 content-type 默认是 “application/json ”,传给后台的格式是这样的: 但是后台接收数据的格式一般是表单格式的,就是formda ...
- spring mvc从后台往前台传参数的三种方式
第一种:使用Model对象(常用) 第一步:使用model对象往前台传递数据 第二步:在jsp中接收从后台传递过来的参数 第二种:使用HttpServletRequest对象 第一步:使用HttpSe ...
- MFC接收命令行参数的三种方法
方法一: CString sCmdline = ::GetCommandLine(); AfxMessageBox(sCmdline); 将获取到 "C:\test\app.exe -1 - ...
- axios发送post请求后台接受不到问题
axios发送post请求后台接受不到问题 1.首先这是前端的问题 2.解决方案不唯一,但这招肯定行 <!DOCTYPE html> <html> <head> & ...
- YbSoftwareFactory 代码生成插件【二十五】:Razor视图中以全局方式调用后台方法输出页面代码的三种方法
上一篇介绍了 MVC中实现动态自定义路由 的实现,本篇将介绍Razor视图中以全局方式调用后台方法输出页面代码的三种方法. 框架最新的升级实现了一个页面部件功能,其实就是通过后台方法查询数据库内容,把 ...
- struts2 Action 接收参数的三种方法
刚学Struts2 时 大家可能遇到过很多问题,这里我讲一下Action 接收参数的三种方法,我曾经在这上面摔过一回.所以要警醒一下自己..... 第一种:Action里声明属性,样例:account ...
- SpringBoot接收前端参数的三种方法
都是以前的笔记了,有时间就整理出来了,SpringBoot接收前端参数的三种方法,首先第一种代码: @RestController public class ControllerTest { //访问 ...
随机推荐
- 安装anaconda和tensorflow
一.首先下载anaconda,下载:Anaconda2-4.3.1-Linux-x86_64.sh(https://repo.continuum.io/archive/)参考网址:https://ww ...
- k8s使用ceph存储
目录 ceph配置 k8s 配置 通过静态pv,pvc使用ceph 测试多pod挂载静态pv数据不一致问题 StoragaClass 方式 ceph 常用命令 k8s 常用命令 k8s各类端口及IP说 ...
- exe文件作为服务启动
一. 准备软件 instsrv.exe srvany.exe 这两个都是 Microsoft Windows Resource Kits 里面的小工具 链接:http://pan.baidu.com/ ...
- 《Craking the Coding interview》python实现---02
###题目:翻转一个字符串###思路:从字符串的最后一位开始,依次取###实现:伪代码.函数.类实现#伪代码: #01string=sNew_s=""for i in range( ...
- android将String转化为MD5的方法+一些String经常使用的方法
public class StringUtils { public static String MD5Encode(String origin) { String resultString = nul ...
- 可能是东半球最全的RxJava使用场景小结
一.Scheduler线程切换 这样的场景常常会在"后台线程取数据,主线程展示"的模式中看见 Observable.just(1, 2, 3, 4) .subscribeOn(Sc ...
- BZOJ 3223 Splay区间翻转
思路: 区间翻转的裸题 终于tm理解splay了-- //By SiriusRen #include <cstdio> #include <cstring> #include ...
- java9新特性-21-java的动态编译器
1. 官方Feature 243: Java-Level JVM Compiler Interface 295: Ahead-of-Time Compilation 2. 产生背景 Oracle 一直 ...
- java9新特性-8-语法改进:钻石操作符(Diamond Operator)使用升级
1.使用说明 我们将能够与匿名实现类共同使用钻石操作符(diamond operator) 在java8中如下的操作是会报错的: 编译报错信息:'<>' cannot be used ...
- HD-ACM算法专攻系列(2)——Rightmost Digit
题目描述: 源码: /**/ #include"iostream" using namespace std; int main() { int t, mod; long long ...