位置: IT常识 - 正文
Vue使用axios用post方式将表单中的数据以json格式提交给后端接收(vue-axios详细介绍)
编辑：rootadminVue使用axios用post方式将表单中的数据以json格式提交给后端接收 Vue Axios Post Json实现步骤：以登录注册功能为例1.后端controller层代码代码
本文链接地址:https://www.jiuchutong.com/zhishi/297368.html
转载请保留说明！
推荐整理分享Vue使用axios用post方式将表单中的数据以json格式提交给后端接收(vue-axios详细介绍)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue如何使用axios,vuecli使用axios,vuecli使用axios,vue axios的使用,vue3.0使用axios,vuecli使用axios,vue-axios详细介绍,vue-axios详细介绍,内容如对您有帮助，希望把文章链接给更多的朋友！
我采用的接收形式数据是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); }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>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
