一、下载安装

官网：https://github.com/axios/axios

二、使用

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>TestAjax</title>
  6.     <link crossorigin="anonymous" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.css" rel="stylesheet">
  7.     <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
  8.     <script  crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <h2 class="page-header">jQuery发送Ajax请求</h2>
  13.         <button class="btn btn-primary">发送GET请求</button>
  14.         <button class="btn btn-danger">发送POST请求</button>
  15.         <button class="btn btn-info">发送通用(ALL)请求</button>
  16.     </div>
  17.     <script>
  18.         const btns = document.querySelectorAll('button');
  19.         axios.defaults.baseURL = 'http://localhost:8000',
  21.         // get请求
  22.         btns[0].onclick = function (){
  23.             axios.get('/axios',{
  24.                 params: {
  25.                     id:100,
  26.                     vip:7,
  27.                 },
  28.                 headers: {
  29.                     name:'name',
  30.                     age:20,
  31.                 }
  32.             }).then(value => {
  33.                 console.log(value);
  34.             })
  35.         }
  36.         // post请求
  37.         btns[1].onclick = function (){
  38.             axios.post('/axios',{
  39.                 username : 'admin',
  40.                 password : 'admin'},
  41.                 {
  42.                     params: {
  43.                         id : 2
  44.                     },
  45.                     headers : {
  46.                         weight : 55
  47.                     }
  48.                 });
  49.         }
  50.         // 通用方法请求
  51.         btns[2].onclick = function (){
  52.             axios({
  53.                 method: 'POST',
  54.                  url: '/axios',
  55.                 params:{
  56.                      vip:9,
  57.                 },
  58.                 headers:{
  59.                      a:300
  60.                 },
  61.                 data:{
  62.                      user:'user'
  63.                 }
  64.             });
  65.         }
  66.     </script>
  67. </body>
  68. </html>