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 简单常用笔记的更多相关文章
- Log4j简单学习笔记
log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...
- OI数学 简单学习笔记
基本上只是整理了一下框架,具体的学习给出了个人认为比较好的博客的链接. PART1 数论部分 最大公约数 对于正整数x,y,最大的能同时整除它们的数称为最大公约数 常用的:\(lcm(x,y)=xy\ ...
- git tag 常用笔记
git tag 常用笔记 查看 tag 列出现有 tag git tag 列出 v1.4.2 相关的 tag git tag -l "v1.4.2" 查看指定 tag 的信息 gi ...
- Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)
<Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...
- Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)
<Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...
- 3.2 配置构建Angular应用——简单的笔记存储应用
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...
- WPF绘制简单常用的Path
写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...
- Linux——帮助命令简单学习笔记
Linux帮助命令简单学习笔记: 一: 命令名称:man 命令英文原意:manual 命令所在路径:/usr/bin/man 执行权限:所有用户 语法:man [命令或配置文件] 功能描述:获得帮助信 ...
- WPF绘制简单常用的Path（转）
写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...
随机推荐
- Azure Paas SQL 修改用户名密码的相关问题
现总结如下,供您参考: 1) 如何单独修改每个数据库的密码? 在portal中,我们提供了一个最高权限的,可管理服务器下所有数据库的服务器用户 跟密码,但在实际使用中,由于权限过大,会有潜在的安全隐 ...
- JAVA的PreparedStatement和addBatch()方法
本文介绍两个内容,为什么使用PreparedStatement的addBatch()方法?以及使用PreparedStatement的好处. 一.addBatch使用方法 昨天用JAVA做了一个导表的 ...
- electron vue 开发客户端程序
文档知识点 https://electronjs.org/docs/tutorial/about (1)Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Ma ...
- Java并发容器——CopyOnWriteArrayList
CopyOnWriteArrayList是“读写分离”的容器,在写的时候是先将底层源数组复制到新数组中,然后在新数组中写,写完后更新源数组.而读只是在源数组上读.也就是,读和写是分离的.由于,写的时候 ...
- 操作系统动态内存管理——malloc和free的工作机制
动态内存分配 就 是指在程序执行的过程中动态地分配或者回收存储空间的分配内存的方法. malloc()是C语言中动态存储管理 的一组标准库函数之一.其作用是在内存的动态存储区中分配一个长度为size的 ...
- ACE .i .inl文件（转）
在ACE的源代码目录里,有源文件.cpp.头文件.h,我们还发现有以.i和.inl为扩展名的文件.其实,以.i和.inl为扩展名的文件是ACE源码中inline函数的存放形式. 在说明ACE中为什么采 ...
- kettle实现数据库迁移----多表复制向导
kettle实现数据库迁移----多表复制向导 需求: 做数据仓库时,需要将业务系统CRM抽取到数据仓库的缓冲层,业务系统使用的是SqlServer数据库,数据仓库的缓冲层使用的是mysql数据库,为 ...
- 关于.NET编程中各种事务的实现
从数据库事务开始 在很早的以前,我们要实现一个事务通常是基于SQL的数据库事务,一般的通过SQL查询语言来实现,如下所示,同时更新两本书的价格: BEGIN TRANSACTION UPDATE tb ...
- python之函数用法setdefault()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法setdefault() #D.get(k,d) #说明:k在D中,则返回 D[K], ...
- Python是解释性语言吗？ 直到看到有 python py、pyc、pyo、pyd 文件
py是源文件,pyc是源文件编译后的文件,pyo是源文件优化编译后的文件,pyd是其他语言写的python库 1. Python是一门解释型语言? Python是一门解释性语言,我就这样一直相信下去, ...