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 { //访问 ...
随机推荐
- Linux 添加挂载硬盘(包含挂载大于2T以上硬盘)
转自:http://blog.csdn.net/season_hangzhou/article/details/36423223 由于事先规划问题或者业务需求量激增,总会出现机器硬盘空间不够用的情况 ...
- 微信小程序 分享海报
const app = getApp(); const template = require('../../template/templates.js'); Page({ /** * 页面的初始数据 ...
- thinkphp5 编辑时 唯一验证 解决办法
若定义了相关的验证规则,如: namespace app\seller\validate; use think\Validate; class Goodsmtag extends Validate { ...
- vue-lazyload插件
更详细的内容,请移步 使用 npm install vue-lazyload --save //注册插件 import vueLazyload from 'vue-lazyload' Vue.use( ...
- 紫书 例题11-8 UVa 11082(网络流最大流)
这道题的建模真的非常的秀, 非常牛逼. 先讲建模过程.源点到每一行连一条弧, 容量为这一行的和减去列数, 然后每一列到汇点连一条弧, 容量为这一列 的和减去行数, 然后每一行和列之间连一条弧, 容量为 ...
- 2015 Multi-University Training Contest 3 hdu 5316 Magician
Magician Time Limit: 18000/9000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total S ...
- RubyMine2017破解
RubyMine2017破解 学习了:https://www.7down.com/soft/172903.html 激活的时候选择 license server; 输入如下地址激活: http://i ...
- 有关Java基础的一些笔试题总结
针对近期腾讯.京东.网易等公司的笔试.遇到一些有关Java基础的问题,在此总结.希望能通过这几道经典问题题发散,举一反三.借此打牢基础! 自己总结,望提出宝贵意见! 一.关于null的一道小题 先开开 ...
- 【大话QT之十六】使用ctkPluginFramework插件系统构建项目实战
"使用ctkPluginFramework插件系统构建项目实战",这篇文章是写博客以来最纠结的一篇文章. 倒不是由于技术都多么困难,而是想去描写叙述一个项目架构採用ctkPlugi ...
- hdu_1754,线段树单点更新,求区间最值
http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #include< ...