axios 简单常用笔记

简单认知：

1、config.data是POST参数，config.params是GET参数

axios(url, [config]) + qs + application/x-www-form-urlencoded

https://github.com/axios/axios#axioscreateconfig

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Vue --><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script><!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script><script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script><style>html, body{margin: 0;padding: 0;}#app {}</style>
</head><body><div id="app"></div>
</body>
<script>axios('http://120.77.146.174:84/api/admin/user/sysUser/login', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},data: Qs.stringify({userAccount: 'dgeduc-b',userPwd: '123456',type: 'account',}),
}).then(response => {console.log(20181203100805, response)// return response.json()
})
</script>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
</head><body><div id="app"></div>
</body>
<script>/*** get 请求*/
axios.get('http://192.168.31.97/index.php?a=123').then(response => {console.log(20181021221522, response)
})/*** post application/x-www-form-urlencoded;charset=utf-8* https://github.com/axios/axios#browser* 推荐使用 qs： * $ cnpm install qs* const params = qs.stringify({ 'a': 123 })*/
const params = new URLSearchParams();
params.append('a', '123');
axios.post('http://192.168.31.97/index.php', params, {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
}).then(response => {console.log(20181021221338, response)
})/*** post application/json;charset=utf-8*/
axios.post('http://192.168.31.97/index.php', {a: 123}).then(response => {console.log(20181021221338, response)
})// ajax（默认是application/json;charset=utf-8）
axios({method: 'post',url: 'http://192.168.31.97/index.php',data: {firstName: 'Fred',lastName: 'Flintstone'}
}).then(response => {console.log(20181021225057, response)
})// ajax（指定为application/x-www-form-urlencoded;charset=utf-8）
const params2 = new URLSearchParams();
params2.append('firstName', 'Fred');
params2.append('lastName', 'Flintstone');
axios({method: 'post',url: 'http://192.168.31.97/index.php',data: params2,headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
}).then(response => {console.log(20181021225057, response)
})
</script>
</html>

index.php

<?php header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Headers:x-requested-with,content-type'); // post（form） 和 get请求
var_dump($_REQUEST);
// application/json;charset=utf-8 的数据必须这样使用
var_dump($GLOBALS['HTTP_RAW_POST_DATA']);

axios 简单常用笔记相关推荐

flex简单常用笔记
flex简单常用笔记多行换行操作: ul {display: flex;flex-direction: row;justify-content: space-between;flex-wrap: w ...
OSX上pf的简单配置笔记
OSX上pf的简单配置笔记水果的OSX上没有iptables,在10.10以后以pf取代ipfw.相比于iptables,pf一般使用配置文件保存防火墙规则,语法规范上更严谨,但是配置也更复杂.规则 ...
Python~Pandas 小白避坑之常用笔记
Python~Pandas 小白避坑之常用笔记提示:该文章仅适合小白同学,如有错误的地方欢迎大佬在评论处赐教文章目录 Python~Pandas 小白避坑之常用笔记前言一.pandas安装二 ...
特征提取算法简单学习笔记
update 2021.04.22 这几年的经验下来,以前以为特征提取的方法时共通的,注意力都在后续算法部分,现在的感受是,不同领域算法反而很多时候时共通的,特征提取差异很大,不能简单的一言以蔽之,这 ...
python超详细的常用笔记
关注微信公众号:(新生程序员教程) 下载python的word笔记,了解更多编程语言和程序员学习网站,学习平台目录第1章:Python的基础篇 1.1计算机的组成[了解] 1.2.计算机如何处理程 ...
Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)
<Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...
WPF绘制简单常用的Path
原文:WPF绘制简单常用的Path 写代码出身的我们经常需要使用一些简单但是不是规则图形的Path 但限于美工功底有限不知道怎么去画下面我告诉大家一些简单的小技巧用代码来画Path 个人还是比 ...
3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记展示.创建.修改和删除笔记在笔记中使用M ...
Vue学习（slot、axios）-学习笔记
文章目录 Vue学习(slot.axios)-学习笔记 slot 插槽 axios 交互 Vue学习(slot.axios)-学习笔记 slot 插槽父: <template> < ...
Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)
转载自:http://www.cnblogs.com/jyzhao/p/4530575.html 目的:指导项目侧自行进行简单的数据泵迁移工作. 本文实验环境:Oracle 11.2.0.4,利用数据 ...

axios 简单常用笔记

axios 简单常用笔记相关推荐

最新文章

热门文章