AJAX相关

如何通过axios发起Ajax哀求(最新推荐)

[db:来源] 坚毅的小解同志2022-11-17AJAX相关7726

Axios是专注于网络数据哀求的库，相比于原生的XMLHttpRequest对象，axios简朴易用。相比于Jquery，axios更加轻量化，只专注于网络数据哀求，这篇文章主要介绍了如何通过axios发起Ajax哀求,需要的朋友可以参考下

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>

在这里插入图片描述