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

csdn动态图标

✍️ 作者简介: 前端新手学习中。

💂 作者主页: 作者主页查看更多前端教学

🎓 专栏分享：css重难点教学 Node.js教学从头开始学习 ajax学习

文章目录

axios

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>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

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);
            })
        })
1
2
3
4
5
6
7

在这里插入图片描述

直接使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

直接使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述

相关阅读:
DPDK和VPP地址池
PDF转PPT怎么转？一键完成格式转换，太方便了
如果想搭建在线客服，应该如何建、
分公司未经授权对外签订合同是否可以
基于UNI-APP实现适配器并保证适配器和实现的调用一致
Thanos解码：打造企业级云原生监控解决方案
c++中的指针
费时“吃透”4个月啃烂完了这份Redis高手心法，成功上岸收到字节offer
pgzrun 拼图游戏制作过程详解（8，9）
【数据结构】排序：经典排序算法原理解析与优劣对比

原文地址：https://blog.csdn.net/m0_62360527/article/details/127834129