AJAX笔记（3）-通过Axios发送AJAX请求

努力的树袋熊

已于 2023-03-22 18:07:31 修改

阅读量85

点赞数

分类专栏： AJAX 文章标签： ajax javascript 前端

于 2023-03-04 23:12:19 首次发布

本文链接：https://blog.csdn.net/qq_52225233/article/details/129340690

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章展示了如何使用JavaScript库Axios通过GET和POST方法发送AJAX请求。在GET请求中，参数和头部信息被设置在axios.get调用中，而在POST请求中，除了params，还有额外的数据(data)字段。此外，还演示了一种通用方式发送POST请求，其中method,params,headers和data都可以自定义配置。

摘要由CSDN通过智能技术生成

1.Axios以GET和POST方式发送AJAX请求

<script>
        const btns = document.querySelectorAll('button');
        //GET方式
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btns[0].onclick = function(){
            axios.get('/axios-server',{
                params:{
                    id:9208101516,
                    vip:7
                },
                headers:{
                    name:'liuyang',
                    age:21
                }
            }).then(value =>{
                ocnsole.log(value);
            })
        };
        //POST方式
        btns[1].onclick = function(){
            axios.post('/axios-server',{
                //
                params:{
                    id:9208101516,
                    vip:7
                },
                //
                headers:{
                    name:'liuyang',
                    age:21
                },
                //
                data:{
                    username:'admin',
                    password:'12345678'
                }
            }).then(value =>{
                ocnsole.log(value);
            })
        };
    </script>

2.Axios以通用方式发送请求

btns[2].onclick = function(){
            axios({
                url:'/axios-server',
                method:'POST',
                params:{
                    id:1000
                },
                headers:{   
                    a:100,
                    b:200
                },
                data:{
                    username:'admin',
                    password:'admin'
                }
            }).then(response =>{
                console.log(response);
            });
        }