Vue使用axios用post方式将表单中的数据以json格式提交给后端接收_vue post json

作者：IT小白 | 2024-03-21 09:11:47

踩

vue post json

Vue Axios Post Json

实现步骤：以登录注册功能为例

1.后端controller层代码代码

我采用的接收形式数据是json格式

    @PostMapping("/login")
    public Resp login(@RequestBody User user){
        User login = userService.login(user.getStudentid(),user.getPassword());
        return Resp.success(login);
    }
    @PostMapping("/regist")
    public Resp regist(@RequestBody User user){
        userService.regist(user);
        return Resp.success(null);
    }
1
2
3
4
5
6
7
8
9
10

2.前端登录注册界面代码

<body>
    <div id="app">
        <form>
            账号：<input type="text" name="studentid" v-model="registform.studentid"><br>
            密码：<input type="text" name="password" v-model="registform.password"><br>
            用户名：<input type="text" name="username" v-model="registform.username"><br>
            <input type="button" value="denglu" @click="tologin">
        </form>
    </div>
</body>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            registform:{
                studentid: "12345678",
                password: "123456",
                // username:"qwq"
            }
        },
        methods:{
            tologin:function(){
                let datata = this.registform;
                console.log("通了");
                axios.post("/user/login",datata).then(function(response){
                    console.log(response.data);
                })
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

3.遇到的问题：

3.1. 我们首先在Vue data中定义一个存放表单数据的registform{}，然后给它添加上属性，在表单input处使用v-model绑定。

3.2. 接下来将registform保存到datata变量中，然后就是axios的发送请求了。格式为axios.post(“url”,{data}),此处为什么我们没有使用括号，而是直接使用的datatta，因为我们的registform外面已经有一层括号了，再加接收就要报错了。

使用axios发送get请求都是传递param，发送post请求都是传递data。

向这位大佬学习：http://t.csdn.cn/irwvx

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/279974