写点什么

【Ajax】如何通过 axios 发起 Ajax 请求

  • 2022-11-22
    河北
  • 本文字数:1112 字

    阅读完需:约 4 分钟

axios

  什么是 axios

Axios 是专注于网络数据请求的库,相比于原生的 XMLHttpRequest 对象,axios 简单易用。相比于 Jquery,axios 更加轻量化,只专注于网络数据请求。

  axios 发起 GET 请求

axios 发起 get 请求的语法:

代码

<body>    <button id="btn1">发起get请求</button>    <script>        document.querySelector('#btn1').addEventListener('click', function () {            let url = 'http://www.liulongbin.top:3006/api/get';            axios.get(url, { params: { name: 'xiaoxie', age: '20' } }).then(function (res) {                console.log(res.data);            })        })    </script></body>
复制代码



  axios 发起 POST 请求

axios 发起 post 请求的语法


 <button id="btn2">发起post请求</button>  document.querySelector('#btn2').addEventListener('click', function () {            let url = 'http://www.liulongbin.top:3006/api/post';            axios.post(url, { name: 'xiaoxie', age: '20' }).then(function (res) {                console.log(res.data);            })        })
复制代码



  直接使用 axios 发起 get 请求

axios 也提供了类似于 Jquery 中 $.ajax()的函数,语法如下:


<body>    <button id="btn3">发起ajax请求</button>    <script>        document.getElementById('btn3').addEventListener('click', function () {            let url = 'http://www.liulongbin.top:3006/api/get';            let paramsData = {                name: 'xiaoxie',                age: 20            }            axios({                method: 'get',                url: url,                params: paramsData,            }).then(                function (res) {                    console.log(res.data);                }            )        })    </script></body>
复制代码



  直接使用 axios 发起 post 请求

<body>    <button id="btn4">发起ajax post请求</button>        document.getElementById('btn4').addEventListener('click', function () {            let url = 'http://www.liulongbin.top:3006/api/post';            let paramsData = {                name: 'xiaoxie',                age: 20            }            axios({                method: 'post',                url: url,                data: paramsData,            }).then(                function (res) {                    console.log(res.data);                }            )        })    </script></body>
复制代码



发布于: 刚刚阅读数: 4
用户头像

还未添加个人签名 2022-10-14 加入

还未添加个人简介

评论

发布
暂无评论
【Ajax】如何通过axios发起Ajax请求_ajax_坚毅的小解同志_InfoQ写作社区