JavaScript 使用axios工具包发送Ajax请求

路宇

已于 2023-01-07 09:41:23 修改

阅读量1.3k

点赞数

分类专栏： web前端基础笔记文章标签： javascript ajax axios 发送ajax请求

于 2022-01-04 17:12:57 首次发布

本文链接：https://blog.csdn.net/lu202032/article/details/122307351

版权

web前端基础笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

博主前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住也分享一下给大家，
👉点击跳转到网站

使用axios工具包，三种方法

get请求
post请求
使用axios函数发送ajax请求

<!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">
    <title>axios发送Ajax请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>

<body>
    <button>GET请求</button>
    <button>POST请求</button>
    <button>使用axios函数发送Ajax请求</button>
    <script>
        const btns = document.querySelectorAll('button');

        //配置baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function() {
            //GET请求
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 1000,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'axios',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function() {

            axios.post('/axios-server', {
                username: 'admin',
                password: 123
            }, {
                //url
                params: {
                    id: 200,
                    vip: 150
                },
                //请求头参数
                headers: {
                    height: 112,
                    wight: 113
                }
            }).then(value => {
                console.log(value);
            })
        }

        btns[2].onclick = function() {
            axios({
                //请求方法
                method: 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip: 10,
                    level: 30
                },
                //头信息
                headers: {
                    a: 100,
                    b: 200
                },
                //请求参数
                data: {
                    username: 'admin',
                    password: '123456'
                }
            }).then(value => {
                // console.log(value);
                console.log(value.status);
                console.log(value.statusText);
                console.log(value.headers);
                console.log(value.data);
            })
        }
    </script>
</body>

</html>

点击每个按钮，便可在控制台看到服务器返回来的数据~

路宇

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 使用axios工具包发送Ajax请求

使用axios工具包，三种方法get请求post请求使用axios函数发送ajax请求<!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-
复制链接

扫一扫