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 ...
随机推荐
- E20190523-h
evaluate v. 估计; 评价; 评估; substantial adj. 大量的; 价值巨大的; 重大的; 大而坚固的; 结实的; 牢固的; portion n. 部分; (食物的) 一份, ...
- QMYSQL driver not loaded 的原理和解决办法
转:http://blog.csdn.net/m15814478834/article/details/49902077 最近使用Qt遇到了"QMYSQL driver not loaded ...
- Search in a Binary Search Tree
Given the root node of a binary search tree (BST) and a value. You need to find the node in the BST ...
- Solr 6.7学习笔记(02)-- 配置文件 managed-schema (schema.xml) - Analyzer, tokenizer(4)
有些时候,我们需要自定义 fieldType.下面的例子就是自定义的 fieldType,<analyzer type="index"> 表示索引时怎么处理,<a ...
- docker中容器和镜像的区别
自学docker过程中一直搞不明白 镜像容器的关系,网上查阅看到一篇文章觉得讲的很好,转载记录. 转自 http://blog.csdn.net/chszs/article/details/48252 ...
- 爬虫之scapy
一 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的用途十分广泛,可 ...
- JavaScript进阶 - 第7章 JavaScript内置对象
第7章 JavaScript内置对象 7-1 什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的, ...
- 《SQL 进阶教程》 case:练习题1-1-1 多列数据的最大值
select name, case when case when x > y then x else y end < z then z else case when x < y th ...
- BZOJ3622(容斥+dp)
思路 "恰k个"考虑求至少k.k+1--个容斥 题面说所有数字都不同,可以将所求转化为糖比药多的组数恰为\((n+k)/2\)的方案数 \(f[i][j]\)数组我觉得更好的理解方 ...
- bzoj4650: [Noi2016]优秀的拆分 hash
好气啊,没开longlong又biubiu了 底层: 用hash或者奇奇怪怪的算法兹磁logn求最长公共前后缀 思路: 统计出从一个点开始和结束的形如AA的子串的个数 统计的时候把相邻的结果相乘加起来 ...