简单认知：

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- Vue -->
  8.     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
  9.     <!-- jquery -->
  10.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  11.  
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  13.  
  14.     <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  15.     <style>
  16.     html, body{
  17.         margin: 0;
  18.         padding: 0;
  19.     }
  20.  
  21.     #app {
  22.  
  23.     }
  24.     </style>
  25. </head>
  26.  
  27. <body>
  28.     <div id="app"></div>
  29. </body>
  30. <script>
  31.  
  32. axios('http://120.77.146.174:84/api/admin/user/sysUser/login', {
  33.       method: 'POST',
  34.       headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
  35.       data: Qs.stringify({
  36.           userAccount: 'dgeduc-b',
  37.           userPwd: '123456',
  38.           type: 'account',
  39.        }),
  40. }).then(response => {
  41.     console.log(20181203100805, response)
  42.     // return response.json()
  43. })
  44. </script>
  45. </html>

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10.     <div id="app"></div>
  11. </body>
  12. <script>
  13.  
  14. /**
  15.  * get 请求
  16.  */
  17. axios.get('http://192.168.31.97/index.php?a=123').then(response => {
  18.     console.log(20181021221522, response)
  19. })
  20.  
  21. /**
  22.  * post application/x-www-form-urlencoded;charset=utf-8
  23.  * https://github.com/axios/axios#browser
  24.  * 推荐使用 qs：
  25.  * $ cnpm install qs
  26.  * const params = qs.stringify({ 'a': 123 })
  27.  */
  28. const params = new URLSearchParams();
  29. params.append('a', '123');
  30. axios.post('http://192.168.31.97/index.php', params, {
  31.     headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
  32. }).then(response => {
  33.     console.log(20181021221338, response)
  34. })
  35.  
  36. /**
  37.  * post application/json;charset=utf-8
  38.  */
  39. axios.post('http://192.168.31.97/index.php', {a: 123}).then(response => {
  40.     console.log(20181021221338, response)
  41. })
  42.  
  43. // ajax（默认是application/json;charset=utf-8）
  44. axios({
  45.   method: 'post',
  46.   url: 'http://192.168.31.97/index.php',
  47.   data: {
  48.     firstName: 'Fred',
  49.     lastName: 'Flintstone'
  50.   }
  51. }).then(response => {
  52.     console.log(20181021225057, response)
  53. })
  54.  
  55. // ajax（指定为application/x-www-form-urlencoded;charset=utf-8）
  56. const params2 = new URLSearchParams();
  57. params2.append('firstName', 'Fred');
  58. params2.append('lastName', 'Flintstone');
  59. axios({
  60.   method: 'post',
  61.   url: 'http://192.168.31.97/index.php',
  62.   data: params2,
  63.   headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'},
  64. }).then(response => {
  65.     console.log(20181021225057, response)
  66. })
  67. </script>
  68. </html>

index.php

  1. <?php 
  2.  
  3. header('Access-Control-Allow-Origin:*');
  4. header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
  5.  
  6. // post（form） 和 get请求
  7. var_dump($_REQUEST);
  8. // application/json;charset=utf-8 的数据必须这样使用
  9. 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. Converter Standardalone 5 versus Converter Boot CD

    The new Converter Standalone 5 lacks the Converter Boot CD. Fortunately you can still use the old ve ...

  2. vs 15 key

    vs 15 Key :HM6NR-QXX7C-DFW2Y-8B82K-WTYJV vs 15 Key :2XNFG-KFHR8-QV3CP-3W6HT-683CH

  3. k-means算法MATLAB和opencv代码

    上一篇博客写了k-means聚类算法和改进的k-means算法.这篇博客就贴出相应的MATLAB和C++代码. 下面是MATLAB代码,实现用k-means进行切割: %%%%%%%%%%%%%%%% ...

  4. Linux使用笔记

    1:Ubuntu系统获取超级权限: 在终端输入:sudo passwd,重置uinx密码.然后输入 su ,输入密码,即可进入root权限. 2:更改文件属性 Linux文件的基本权限有九个,分别是o ...

  5. Atitit.Guibutton与面板---项目规模的评估----文件数统计,结构,代码行数,每类型文件行数.

    Atitit.Guibutton与面板---项目规模的评估----文件数统计,结构,代码行数,每类型文件行数. 1. Kpi:::  代码行数(凝视行数,空白的行数), 方法数,class数 1 2. ...

  6. 取某字段不为空的数据is not null

    SELECT * FROM 表名  where  uid='xxx'  and  time  is not null

  7. 一网打尽2013最常用的NoSQL数据库

      摘要:与关系数据库相比,每个NoSQL都有自己不同的适用场景,这里带大家盘点文档数据库.图数据库.键值数据存储.列存储数据库与内存数据网络等领域的常用的NoSQL. 在几年内,NoSQL数据库一直 ...

  8. 防火墙 Firewalld

    RHEL7支持的防火墙: IPTABLES IP6TABLES FIREWALL EBTABLES 命令模式: firewall-cmd 图形化界面: firewall-config Firewall ...

  9. sort.js

    JavaScript to achieve the ten common sorting algorithm library 1 ; (function (global, factory) { // ...

  10. （原+译）使用numpy.savez保存字典后读取的问题

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/7608928.html 参考网址; https://stackoverflow.com/question ...