axios的post请求方法---以Vue示例
Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。
axios 请求配置中,transformRequest
配置允许在向服务器发送前,修改请求数据。
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理 return data;
}],
可以使用该配置修改请求参数。
参考资料:https://www.kancloud.cn/yunye/axios/234845
如下是axios的两种方法
方法一:
this.axios({
url: '/user',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
当然可以在main.js
中进行配置
// main.js import Axios from 'axios'
import VueAxios from 'vue-axios' const MyAxios = Axios.create({
transformRequest: [function (data) {
// 将数据转换为表单数据
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}) Vue.use(VueAxios, MyAxios)
参考链接:https://segmentfault.com/q/1010000008462977
方法二:使用qs模块/querystring模块
//import qs from 'querystring'
import qs from 'qs'
//export default{ .. }
this.axios({
url: '/user',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
transformRequest: [function (data) {
data = qs.stringify(data);
return data;
}],
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
})
此方法操作前,需要先安装qs
npm install --save qs
参考链接:https://blog.csdn.net/shooke/article/details/76038967
axios的post请求方法---以Vue示例的更多相关文章
- vue 使用 axios 时 post 请求方法传参无法发送至后台
axios 时 post 请求方法传参无法发送至后台报错如下 Response to preflight request doesn't pass access control check: No ' ...
- axios浏览器异步请求方法封装 XMLHttpRequest
axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...
- vue使用axios进行ajax请求
以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...
- Vue-cli3.x中使用Axios发送跨域请求的配置方法
Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...
- $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)
1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...
- vue使用axios发送数据请求
本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...
- axios get及post方法代码示例&&方法封装
axios get及post方法代码示例 get方法: show: function(){ //get方式 //赋值给变量self var self = this; var url = "h ...
- Vue简单封装axios—解决post请求后端接收不到参数问题
1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...
- vue使用axios发送post请求时的坑及解决原理
前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊 vue里代码如下: this.$http.post('/ge ...
随机推荐
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
- Shader 模板缓冲和模板测试
http://blog.sina.com.cn/s/blog_6e159df70102xa67.html 模板缓冲的概念 Unity官方的Shader文档根本没有提到这个玩意,这个概念也是看到了UGU ...
- 洛谷P3293 [SCOI2016]美味(主席树)
传送门 据说这题做法叫做可持久化trie树?(然而我并不会) 首先考虑一下贪心,从高位到低位枚举,如果能选1肯定比选0优 假设已经处理到了$b$的第$i$位,为1(为0的话同理就不说了) 那么只有当$ ...
- IT兄弟连 Java语法教程 Java开发环境 安装JDK
因为我们要开发Java程序,所以必须在我们的计算机中安装Sun(Oracle)公司提供给我们的JDK.目前最新版本的JDK是JDK 10,但是我们以学习JDK 8为主,所以我们要安装的版本是JDK 8 ...
- Node.js的安装与使用-Windows系统
首先到官网下载node.js http://nodejs.cn 下载完成后一直下一步Next即可安装完成,路径可以自己设置 然后配置环境变量,将node安装的目录配置到Path中 例如: cmd打开命 ...
- linux设置重启
crontab -e 0 6 * * * reboot service crond restart
- Codeforces Round #564 (Div. 2) C. Nauuo and Cards
链接:https://codeforces.com/contest/1173/problem/C 题意: Nauuo is a girl who loves playing cards. One da ...
- hdu6062RXD and logic gates多校题 构造
听说标算的点数是2^(n+1)级别的,也不知道我是不是比标算优一点? (话说这种题一眼看过去怎么跟题答一样) 然而并不是题答,没法手玩,来考虑一下一般解法: 考虑一个规模较小的问题:最后一位一定是0 ...
- java中 json和bean list map之间的互相转换总结
JSON 与 对象 .集合 之间的转换 JSON字符串和java对象的互转[json-lib] 在开发过程中,经常需要和别的系统交换数据,数据交换的格式有XML.JSON等,JSON作为一个轻量级 ...
- CSS——三种页面引入方法
目的:为了把样式和内容分开,并且使网页元素更加丰富,引入了CSS CSS页面引入有三种方式: 1)内联式:比较不常用,因为内容和样式仍然在一起,不方便.示例: <!DOCTYPE html> ...