简单认知：

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 简单常用笔记的更多相关文章

  1. Log4j简单学习笔记

    log4j结构图: 结构图展现出了log4j的主结构.logger:表示记录器,即数据来源:appender:输出源,即输出方式(如:控制台.文件...)layout:输出布局 Logger机滤器:常 ...

  2. OI数学 简单学习笔记

    基本上只是整理了一下框架,具体的学习给出了个人认为比较好的博客的链接. PART1 数论部分 最大公约数 对于正整数x,y,最大的能同时整除它们的数称为最大公约数 常用的:\(lcm(x,y)=xy\ ...

  3. git tag 常用笔记

    git tag 常用笔记 查看 tag 列出现有 tag git tag 列出 v1.4.2 相关的 tag git tag -l "v1.4.2" 查看指定 tag 的信息 gi ...

  4. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...

  5. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...

  6. 3.2 配置构建Angular应用——简单的笔记存储应用

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  7. WPF绘制简单常用的Path

    写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...

  8. Linux——帮助命令简单学习笔记

    Linux帮助命令简单学习笔记: 一: 命令名称:man 命令英文原意:manual 命令所在路径:/usr/bin/man 执行权限:所有用户 语法:man [命令或配置文件] 功能描述:获得帮助信 ...

  9. WPF绘制简单常用的Path（转）

    写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...

随机推荐

  1. 微信小程序 - debug（调试）

    微信小程序调试的方式是基于Chrome. 1. 常见console.log调试(可以具体参考console.log这个函数使用,它可不止这一个作用!) 2.使用NETWORK(我们可以查询到访问了那些 ...

  2. 通过Fiddler抓取Java HttpClient的HTTP包

    设置HttpClient访问Fiddler的代理即可. public static void main(String[] args) throws Exception { HttpPost httpP ...

  3. 神器phpstorm功能具体解释

    phpstorm包括了webstorm的所有功能,更可以支持php代码. PhpStorm是一个轻量级且便捷的PHP IDE,其旨在提供用户效率,可深刻理解用户的编码,提供智能代码补全,高速导航以及即 ...

  4. 【转】Android Studio开发应用桌面出现两个或多个图标

    原文链接:http://blog.csdn.net/jia635/article/details/78259699 解决办法: 查找的是不是自己的AndroidManifest中 多个Activity ...

  5. Echarts柱状图的点击事件

    最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...

  6. 如何处理Entity Framework中的DbUpdateConcurrencyException异常

    1. Concurrency的作用 场景 有个修改用户的页面功能,我们有一条数据User, ID是1的这个User的年龄是20, 性别是female(数据库中的原始数据) 正确的该User的年龄是25 ...

  7. NFS 网络文件系统测试笔记

    NFS(Network Files System),网络文件系统是1980年由SUN发展出来在UNIX&Linux系统间实现磁盘文件共享的一种方法.它是一种文件系统协议:支持应用程序在客户端通 ...

  8. scala object 转Class Scala强制 类型转换

    scala object 转Class Scala强制类型转换   asInstanceOf[T] 将对象类型强制转换为T类型. 还是由于泛型存在类型擦除的原因,1.asInstanceOf[Stri ...

  9. phpBB3.1和3.2

    闲逛看到一个帖子, phpBB3的论坛经常被机器人注册攻击, 要找人做拦截. 出于兴趣, 联系了一下. 论坛是一个做健康养老调查的社会机构的, 版本3.1, 十年前我还在更新phpbb中文包的时候, ...

  10. 【laravel5.4】安装指定版本的predis 和 处理laravel5.*安装使用Redis以及解决Class 'Predis\Client' not found和Fatal error: Non-static method Redis::set() cannot be called statically错误

    (predis下载地址:https://packagist.org/packages/predis/predis) 1.cmoposer 命令行: php composer require predi ...