axios后段交互，发送post，get请求，已表单形式提交请求

本文链接：https://blog.youkuaiyun.com/qq_37605109/article/details/122503283

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">
    username: <input type="text" v-model="user.username">
    password: <input type="text" v-model="user.password">   //v-model都是绑定下边user里边的字段的
    file_name: <input type="file" v-on="user.file">//这个是上传文件的
    <button @click="login">登录</button>
    <p>{{result}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  //这个是引用vue
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>      //这个是引用axios
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user: {
                "username": "",
                "password": "",
                "file": ""
            },
            result: ""
        },
        methods: {
            // login(){
            //     axios.post("http://httpbin.org/post",this.user).then(response=>{
            //         console.log(response)
            //         this.result=response
            //     }).catch(error=>{
            //         console.log(error)
            //     })
            //
            // }
            login() {
                var biaodan = new FormData() //这个是已表单的格式发送请求
                for (const i in this.user) {
                    biaodan.append(i, this.user[i])

                }
                axios.post("http://httpbin.org/post", biaodan).then(res => {     //比如这个res=>,是变量的意思，这个就是把post请求的结果赋值给res
                    this.result = res
                }).catch(error => {
                    console.log(error)
                })

            }
        }
    })
</script>
</html>