最近用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. luogu P2252 取石子游戏(威佐夫博弈)

    题意 题解 对于像我这种不知道威佐夫博弈的人来说,拿到题就开始打表了. 然而打完后并没有发现什么. 然后才知道是威佐夫博弈. 结论是当(int)((b-a)*((sqrt(5.0)+1.0)/2.0) ...

  2. [HDU5688]2016"百度之星" - 资格赛 Problem D

    题目大意:给你n个字符串,如果一个字符串可以通过重新排列变成另一个字符串,则认为这两个字符串相等.每输入一个字符串,输出这个字符串和与它相等的之前出现了几次. 解题思路:我们可以用map保存一个字符串 ...

  3. 【CS round 34】Minimize Max Diff

    [题目链接]:https://csacademy.com/contest/round-34/task/minimize-max-diff/ [题意] 给你n个数字; 数组按顺序不下降; 让你删掉k个数 ...

  4. POJ 2607 Fire Station

    Fire Station Time Limit: 5000ms Memory Limit: 65536KB This problem will be judged on PKU. Original I ...

  5. hadoop-08-关闭THP服务

    hadoop-08-关闭THP服务 #查看THP服务cat /sys/kernel/mm/redhat_transparent_hugepage/enabledcat /sys/kernel/mm/r ...

  6. UE4 中的人工智能解析—ShooterGame为例

    在UE4编辑器中,打开内容浏览器,右击鼠标,创建传说中的行为树: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQTM2MzA2MjM=/font/5a6L ...

  7. Android体验高扩展艺术般的适配器

    前言 本篇文章带大家体验一下一种具有扩展性的适配器写法. 这个适配器主要用于Item有多种的情况下.当然仅仅有一种类型也是适用的 实现 毫无疑问我们要继承BaseAdapter,重写getCount, ...

  8. HDU5053the Sum of Cube(水题)

    HDU5053the Sum of Cube(水题) 题目链接 题目大意:给你L到N的范围,要求你求这个范围内的全部整数的立方和. 解题思路:注意不要用int的数相乘赋值给longlong的数,会溢出 ...

  9. [Atcoder Grand 006 C] Rabbit Exercise 解题报告 (期望)

    题目链接:https://www.luogu.org/problemnew/show/AT2164 https://agc006.contest.atcoder.jp/tasks/agc006_c 题 ...

  10. ZooKeeper Recipes and Solutions

    原文地址:http://zookeeper.apache.org/doc/current/recipes.html 参考:https://zookeeper.apache.org/doc/trunk/ ...