最近用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. Linux 添加挂载硬盘(包含挂载大于2T以上硬盘)

    转自:http://blog.csdn.net/season_hangzhou/article/details/36423223 由于事先规划问题或者业务需求量激增,总会出现机器硬盘空间不够用的情况 ...

  2. 微信小程序 分享海报

    const app = getApp(); const template = require('../../template/templates.js'); Page({ /** * 页面的初始数据 ...

  3. thinkphp5 编辑时 唯一验证 解决办法

    若定义了相关的验证规则,如: namespace app\seller\validate; use think\Validate; class Goodsmtag extends Validate { ...

  4. vue-lazyload插件

    更详细的内容,请移步 使用 npm install vue-lazyload --save //注册插件 import vueLazyload from 'vue-lazyload' Vue.use( ...

  5. 紫书 例题11-8 UVa 11082(网络流最大流)

    这道题的建模真的非常的秀, 非常牛逼. 先讲建模过程.源点到每一行连一条弧, 容量为这一行的和减去列数, 然后每一列到汇点连一条弧, 容量为这一列 的和减去行数, 然后每一行和列之间连一条弧, 容量为 ...

  6. 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 ...

  7. RubyMine2017破解

    RubyMine2017破解 学习了:https://www.7down.com/soft/172903.html 激活的时候选择 license server; 输入如下地址激活: http://i ...

  8. 有关Java基础的一些笔试题总结

    针对近期腾讯.京东.网易等公司的笔试.遇到一些有关Java基础的问题,在此总结.希望能通过这几道经典问题题发散,举一反三.借此打牢基础! 自己总结,望提出宝贵意见! 一.关于null的一道小题 先开开 ...

  9. 【大话QT之十六】使用ctkPluginFramework插件系统构建项目实战

    "使用ctkPluginFramework插件系统构建项目实战",这篇文章是写博客以来最纠结的一篇文章. 倒不是由于技术都多么困难,而是想去描写叙述一个项目架构採用ctkPlugi ...

  10. hdu_1754,线段树单点更新,求区间最值

    http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #include< ...