前端——AJAX

jQuery方式的AJAX

    <script>

        // get
        //第一个参数是地址url，第二个参数是数据data，第三个参数是返回结果函数
        $('button').eq(0).click(function(){
            $.get('http://localhost:8000/jquery-server',{a:100,b:200},function(response){
                console.log(response);
            },'json');
        });

        // <!-- post -->
        //第一个参数是地址url，第二个参数是数据data，第三个参数是返回结果函数
        $('button').eq(1).click(function(){
            $.post('http://localhost:8000/jquery-server',{a:100,b:200},function(response){
                console.log(response);
            });
        });

        // ajax
        $('button').eq(2).click(function(){
            //url、data、type、dataType、success、error、headers
            $.ajax({
                url:'http://localhost:8000/delay',
                data:{a:100,b:200},
                type:'get',
                dataType:'json',
                success:function(res){
                    console.log(res);
                },
                timeout:2000,
                error:function(){
                    console.log('出错了!!');
                },
                headers:{
                    c:300,
                    d:400
                }
            });
        });
    </script>

axios方式的AJAX

<script>
        const buttons = document.querySelectorAll('button');
        //配置 baseURL
        axios.defaults.baseURL = 'http://localhost:8000';

        buttons[0].onclick = function () {

            //get请求
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        };

        buttons[1].onclick = function () {

            //get请求
            axios.get('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        };

        buttons[2].onclick = function () {

            //get请求
            axios({
                //请求方法
                method:'post',
                //url
                url:'/axios-server',
                //url参数
                params:{
                    vip:10,
                    level:30
                },
                //头信息
                header:{
                    a:100,
                    b:200
                },
                //请求体参数
                data:{
                    username:'admin',
                    password:'admin'
                }
            }).then(res=>{
                console.log(res);
                console.log(res.statusText);
                console.log(res.header);
                console.log(res.data);
            });
        };
    </script>