zoukankan      html  css  js  c++  java
  • 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']);
  • 相关阅读:
    【特别推荐】12款最佳的网站速度和性能测试工具
    Skeljs – 用于构建响应式网站的前端开发框架
    EpicEditor – 可嵌入的 JavaScript Markdown 编辑器
    12个学习 CSS3 网站布局设计的优秀案例
    15套流行的扁平化设计的界面素材【免费下载】
    JavaScriptOO.com – 快速找到你需要的 JS 框架
    15款最好的 jQuery Modal(模态窗口)插件
    开眼了!20个极具创意的移动界面动画效果
    ShareDrop – 苹果 AirDrop 服务的 HTML5 实现
    Furatto – 轻量,友好的响应式前端开发框架
  • 原文地址:https://www.cnblogs.com/CyLee/p/9827489.html
Copyright © 2011-2022 走看看