axios最最基础的用法

发布时间 2023-06-16 21:12:11作者: 20岁的老年人

axios

ajax请求库,比较热门吗,这里是最基础的发送请求和接收参数

 

 

一,axios的理解和使用

服了,看弹幕给我看的没自信了。

axios最基本的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
   <title>Document</title>
</head>
<body>

   <div class="boxer">

       <h1>axios的基本使用</h1>
       <button class="btn btn-get">GET方法</button>
       <button class="btn btn-post">POST方法</button>
       <button class="btn btn-delete">DELETE方法</button>
       <button class="btn btn-put">PUT方法</button>

   </div>
   <script>
        const btns = document.querySelectorAll('button')

        btns[0].onclick = function(){
            axios({
               method:'GET',
               url:'http://localhost:3000/students'

            }).then(response=>{
               console.log(response)
            })
        }

        btns[1].onclick = function(){
            axios({
               method:'POST',
               url:'http://localhost:3000/students',
               data:{
                   "name":"wds",
                   "age":18
              }

            }).then(response=>{
               console.log(response)
            })
        }
   </script>
</body>
</html>

{
 "students": [
  {
     "id": 1,
     "name": "wds",
     "age": 21
  },
  {
     "id": 2,
     "name": "wds",
     "age": 21
  },
  {
     "id": 3,
     "name": "wds",
     "age": 21
  },
  {
     "name": "wds",
     "age": 18,
     "id": 4
  }
]
}