<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <div id="app">
        <h2>请输入你的姓名和年龄</h2>
        <form action="">
            <input type="text" v-model="name"><br>
            <input type="text" v-model="age">
        </form>
        <button @click="requestByGet">GET</button>
        <button @click="requestByPost">POST</button>
        <button @click="requestByPostJson">POSTJson</button>
        <p>{{msg}}</p>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>

    <script>

        const ax = axios.create({
            baseURL: "http://demo-api.geekfun.website",
        });

        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    msg:'',
                    name:'',
                    age:''
                }
            },
            methods:{
                requestByGet:function () {
                    ax.get('/vue/01/01.aspx',{
                        params:{
                            name:this.name,
                            age:this.age,
                        }
                    }).then((response)=>this.msg = response.data);

                },
                requestByPost(){
                    let data = new FormData();
                    data.append('name',this.name);
                    data.append('age',this.age);
                    ax.post('/vue/get-vs-post.aspx',data)
                        .then((response)=>this.msg = response.data);
                },
                requestByPostJson(){
                    ax.post('/vue/get-vs-post.aspx',{
                        name:this.name,
                        age:this.age,
                    }).then((response)=>this.msg = response.data);
                }
            },
        });
    </script>
</body>
</html>