在vue中如果直接使用与ajax的参数传递方式类型是不正确的,需要转化,方式有两种

1:使用 new URLSearchParams()构造参数

let params = new URLSearchParams();
params.append('key1', 'value1'); //你要传给后台的参数值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
method: 'post',
url:url,
data:params
}).then((res)=>{ });

  

2.使用qs

npm install qs --save

import qs from 'qs'

Vue.prototype.$qs = qs

 let postData = this.$qs.stringify({
key1:value1,
key2:value2,
key3:value3,
});
this.$axios({
method: 'post',
url:'url',
data:postData
}).then((res)=>{ });

axios使用post方式请求出现400的更多相关文章

  1. 05: 使用axios/vue-resource发送HTTP请求

    1.1 axios 简介与安装 1.axios简介 1. vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 2. axios是一个基于Promise的HTTP请 ...

  2. 使用Typescript重构axios(二十七)——添加请求状态码合法性校验

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  3. Vuex、axios、跨域请求处理和import/export的注意问题

    一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...

  4. axios发送两次请求原因及解决方法

    axios发送两次请求原因及解决方法 最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的. 如图: 什么是CORS通信? ...

  5. 使用Typescript重构axios(二十二)——请求取消功能:收尾

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  6. 【axios】get/post请求params/data传参总结

    axios中get/post请求方式 1. 前言 最近突然发现post请求可以使用params方式传值,然后想总结一下其中的用法. 2.1 分类 get请求中没有data传值方式 2.2 get请求 ...

  7. axios源码解析 - 请求方法的别名实现

    axios中的创建请求方式很多,比如axios(url),axios.get(url),axios.post(url),axios.delete(url),方便快捷的api设计让axios火得一塌糊涂 ...

  8. JAVA Socket 实现HTTP与HTTPS客户端发送POST与GET方式请求

    JAVA Socket 实现HTTP与HTTPS客户端发送POST与GET方式请求 哇,一看标题怎么这么长啊,其实意思很简单,哥讨厌用HTTP Client做POST与GET提交 觉得那个毕竟是别人写 ...

  9. Ajax-(get/post/jQuery方式请求)

    < !DOCTYPE html > < html xmlns = "http://www.w3.org/1999/xhtml" > < head &g ...

随机推荐

  1. c语言推箱子 扫雷项目

    推箱子 两关的推箱子用到一个三维数组 用到的图片数据如下 https://pan.baidu.com/s/1IDE4GQLo46cxNywDqwxmlQ 密码:jdel 代码如下: #include& ...

  2. Linux权限管理(7)

    权限的基本介绍: rwx权限详解: rwx作用到文件: [r]:代表可读,可以读取.查看 [w]:代表可写,可以修改,但不代表可以删除该文件,删除一个文件的前提条件是对该文件所在的目录有写权限才能删除 ...

  3. .NET Core 小程序开发零基础系列(2)——小程序服务通知(模板消息)

    基于上一篇文件“.NET Core 小程序开发零基础系列(1)——开发者启用并校验牵手成功”的反映,个人觉得效果很不错,大家对公众号开发还是有很大需求的,同时也收到了很多同学的问题,后面我也会通过实战 ...

  4. C#使用iTextSharp给PDF文件加水印

    给PDF添加水印,可以用iTextSharp. 步骤1:下载iTextSharp 步骤2:在项目中添加引用itextsharp.dll 步骤3:在程序中使用iTextSharp.text.pdf us ...

  5. 初尝RabbitMQ消息队列

    RabbitMQ 是什么? 消息中间件 作用?     用于分布式项目中的模块解耦 用法? 创建队列 创建消息工厂并设置 (生产者额外步骤 : 创建消息) 创建连接,通道 声明队列 生产者 : 发送消 ...

  6. Python--编码与字符串

    为什么字符串要编码呢? 因为计算机只能处理数字,最底层的CPU只能识别0和1.所以字符串就需要编码成对应的数字. 在计算机中,最开始只有ASCII,我们开始接触计算机编程时就学了ASCII码.最早只有 ...

  7. netty源码解解析(4.0)-20 ChannelHandler: 自己实现一个自定义协议的服务器和客户端

    本章不会直接分析Netty源码,而是通过使用Netty的能力实现一个自定义协议的服务器和客户端.通过这样的实践,可以更深刻地理解Netty的相关代码,同时可以了解,在设计实现自定义协议的过程中需要解决 ...

  8. HTML(三)链接,<head>,css样式

    HTML链接 HTML 超链接 一个未访问过的链接显示为蓝色字体并带有下划线 访问过的链接显示为紫色并带有下划线 点击链接时,链接显示为红色并带有下划线 注意:如果为这些超链接设置了 CSS 样式,展 ...

  9. 传入值参数&传入引用参数的区别

    传值&传引用 1.传值 是把实参的值赋值给行参 那么对行参的修改,不会影响实参的值 2.传地址 是传值的一种特殊方式,只是他传递的是地址 那么传地址以后,实参和行参都指向同一个对象 3.传引用 ...

  10. QFramework 使用指南 2020(七):Res Kit (1)概述与基本使用

    在上一篇,我们刚刚结束了 脚本生成专题,我们知道 QF 提供了两种脚本生成模式,一种是 ViewController + Bind ,另一种是 UI Kit 模式. 本来打算,介绍完 ViewCont ...