<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>axios</title>
        </head>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/axios.min.js" ></script>
        <script type="text/javascript" src="js/vue-resource.min.js" ></script>
        <script>
            window.onload = function(){
                //配置是否允许检查代码,方便调试，生产环境中设置为false
                Vue.config.devtools = true;  //检查代码
                Vue.config.productioinTip = false;  //有强迫症的，可以关掉生产中的提示信息
                new Vue({
                    el:'#div1',
                    data:{
                        user:{
                            name: 'lili',
                            age:20
                        }
                    },
                    methods:{
                        send(){
                            axios({
                                method:'get',
                                url:'user.json'
                            }).then(function(res){
                                console.log(res.data);
                            }).catch(function(msg){
                                console.log(msg.status);
                            });
                        },
                        getSend(){
                            axios.get('user.php',{
                                params:{
                                    name: '李四',
                                    age: 19
                                }
                            }).then(res => {
                                console.log(res.data);
                            }).catch(err => {
                                console.log('get请求失败:'+err.status+','+err.statusText);
                            })
                        },
                        postSend(){
                            axios.post('server.php',this.user,{
                                transformRequest:[
                                    function(data){
                                        let params = '';
                                        for(let index in data){
                                            params += index+'='+data[index]+'&';
                                        }
                                        return params;
                                    }
                                ]
                            }).then(resp => {
                                console.log(resp.data);
                            }).catch(err => {
                                console.log('请求失败:'+err.status+','+err.statusText);
                            })
                        },
                        jsonpSend(){
                            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                                params:{
                                    wd:'a' //百度的参数
                                },
                                jsonp: 'cb',//可以修改对方请求参数名称
                            }).then(res => {
                                console.log(res.data);
                            })
                        }
                    }
                })
            }
        </script>
        <body>
            <div id="div1">
                <button @click="send">axios请求</button>
                <button @click="getSend">get请求</button>
                <button @click="postSend">post请求</button>
                <button @click="jsonpSend">jsonp请求</button>
            </div>
        </body>
    </html>
<?php
    $name = $_GET['name'];
    $age = $_GET['age'];
    $msg =  '用户名：'.$name.',年龄：'.$age;
    echo $msg;
<?php
    $name = $_POST['name'];
    $age = $_POST['age'];
    $msg =  '用户名：'.$name.',年龄：'.$age;
    echo $msg;