使用axios发起GET和POST数据请求

1、第一引入axios.js库

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、HTML

    <button id="btnUpload">发起GET请求</button>
    <button id="btnUpload2">发起POST请求</button>

    <button id="btn1">直接使用axios发起GET请求</button>
    <button id="btn2">直接使用axios发起POST请求</button>

3、JS

document.querySelector( #btnUpload ).addEventListener( click ,function() {
            var url =  http://www.liulongbin.top:3006/api/get 
            var paramsObj = {name:  zs ,age: 3}
            //  axios.get(url,{要传输的对象}).then(回调函数)
            axios.get(url,{params: paramsObj}).then(function(res){
                console.log(res.data);
            })
        })



        document.querySelector( #btnUpload2 ).addEventListener( click ,function(){
            // 请求的URL地址
            var url =  http://www.liulongbin.top:3006/api/post 

            // 要提交到服务器的数据
            var dataObj = {address: 北京 ,location:  顺义 }

            // 调用axios.post()发起POST请求
            axios.post(url,dataObj).then(function(res) {
                console.log(res.data);
            })
        })


        document.querySelector( #btn1 ).addEventListener( click ,function(){
            // 请求的URL地址
            var url =  http://www.liulongbin.top:3006/api/get 

            // 要提交到服务器的数据
            var paramsData = {name: 钢铁侠 ,age:  35 }

            axios({
                method:  GET ,
                url: url,
                params: paramsData
            }).then(function(res){
                console.log(res.data);
            })
        })


        document.querySelector( #btn2 ).addEventListener( click ,function(){
            axios({
                method:  POST ,
                url:  http://www.liulongbin.top:3006/api/post ,
                data: {bookname: 大灰狼啃小红 ,price:  88 }
            }).then(function(res){
                console.log(res.data);
            })
        })