使用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);
            })
        })