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

最新推荐文章于 2022-06-24 20:18:44 发布

爱学习的苗总

最新推荐文章于 2022-06-24 20:18:44 发布

阅读量284

点赞数

分类专栏： axios 文章标签：前端

本文链接：https://blog.csdn.net/qq_37605109/article/details/122503283

版权

axios 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>

爱学习的苗总

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios后段交互，发送post，get请求，已表单形式提交请求

<!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:.
复制链接

扫一扫