Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例
更新时间：2023年06月13日 09:12:27 作者：lucky person
这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库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);
}2.前端登录注册界面代码
<body>
<div>
<form>
账号：<input type="text" name="studentid" v-model="registform.studentid">
密码：<input type="text" name="password" v-model="registform.password">
用户名：<input type="text" name="username" v-model="registform.username">
<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。
补充：vue使用axios 发送post请求的四种方法
写法一： 后端可以接收到，应该是json格式
export const requestLogin = params => { console.log(params);
return $axios.post(`http://192.168.0.105:5846/Home/TestData`,
qs.stringify(params,{ indices: false }),
{ // 这里是跨域写法
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} // 这里是跨域的写法
}).then(res => res.data); };写法二：这样的方式只能通过输入流获取对应的json格式，而request.form就会乱码
export const requestLogin = params => { console.log(params);
return $axios({
method:'POST',
url:'http://192.168.0.105:5846/Home/TestData',
data:params,
transformRequest: [function (data) {
let ret = '{'
for (let it in data) {
ret += ""+ encodeURIComponent(it) + ':' + encodeURIComponent(data[it]) + ','
}
ret+="}"
return ret
}],
headers:{'Content-Type': "application/x-www-form-urlencoded"}
}).then(res => res.data); };写法三：后端获取不到参数
export const requestLogin = params => { console.log(params);
return $axios.post('http://192.168.0.105:5846/Home/TestData',params,
// {headers:{'Access-Control-Allow-Origin': "*"}}
).then(res => res.data); };写法四：官方写法 这种方式可以获取json格式
export const requestLogin = params => { console.log(params);
return $axios({url:'http://192.168.0.105:5846/Home/TestData',
method:'post',
data:params,
headers:{'Content-Type': "application/x-www-form-urlencoded"}}
// {headers:{'Access-Control-Allow-Origin': "*"}}
).then(res => res.data); };相关文章
这篇文章主要介绍了vue cli构建的项目中请求代理与项目打包问题,需要的朋友可以参考下2018-02-02
这篇文章主要为大家介绍了vue打包之后配置统一请求地址实现步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章主要介绍了vue3.x中apollo的使用,通过前端自身直接获取到apollo的配置目前看到官方支持的客户端是没有vue的，本文给大家介绍了前端获取到apollo数据的过程，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了Vue+Element-U实现分页显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章分享一个比较有意思的东西，那就是Vue中如何实现cache缓存的，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
本文通过实例给大家介绍了Vue中使用webpack别名的方法,非常不错，具体一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
在 Vue 中,组件是构建用户界面的基础,而动态组件的引入,更是让开发者能够在应用中实现灵活、可重用的视图逻辑,本文将探讨 Vue 3 中的动态组件,分享其使用场景,并通过示例代码来说明其操作方法,需要的朋友可以参考下2025-01-01
目前前端最流行的网络请求库还是axios,所以对axios的封装很有必要,下面这篇文章主要给大家介绍了关于vue3中封装Axios请求及在组件中使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)
Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,本文给大家分享vue中路由跳转的几种方式（和$router下路由跳转的那几个方法的区别）,感兴趣的朋友一起看看吧2023-11-11
最新评论