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); };

您可能感兴趣的文章:

Vue3数字滚动插件vue-countup-v3的使用
vue-countup-v3 插件是一个基于 Vue3 的数字动画插件，用于在网站或应用程序中创建带有数字动画效果的计数器，本文主要介绍了Vue3数字滚动插件vue-countup-v3的使用，感兴趣的可以了解一下
2023-10-10
详解van-cell如何使用插槽
这篇文章主要为大家介绍了van-cell如何使用插槽详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-12-12
vue中post请求报400的解决方案
这篇文章主要介绍了vue中post请求报400的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
示例vue 的keep-alive缓存功能的实现
这篇文章主要介绍了示例vue 的keep-alive缓存功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
在Vue3中使用Vue Tour实现页面导览
Vue Tour 是一个方便的 Vue.js 插件,它可以帮助我们在网站或应用中实现简单而灵活的页面导览功能,本文我们将介绍如何在 Vue 3 中使用 Vue Tour,并通过示例代码演示其基本用法,需要的朋友可以参考下
2024-04-04
Vue3项目页面实现echarts图表渐变色的动态配置的实现步骤
在开发可配置业务平台时,需要实现让用户对项目内echarts图表的动态配置,让用户脱离代码也能实现简单的图表样式配置,颜色作为图表样式的重要组成部分,其配置方式是项目要解决的重点问题,所以本文介绍了Vue3项目页面实现echarts图表渐变色的动态配置
2024-10-10
nuxtjs中如何对axios二次封装
这篇文章主要介绍了nuxtjs中如何对axios二次封装问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue实现换肤功能
这篇文章主要为大家详细介绍了vue实现换肤功能，一套深色，一套浅色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue.js之slot深度复制详解
这篇文章主要介绍了Vue.js之slot深度复制的相关资料，文中介绍的很详细，对大家具有一定的参考价值，需要的朋友们来一起看看吧。
2017-03-03
VueJs组件prop验证简单介绍
今天看了vuejs的组件，看到了prop组件，主要作用是在传入数据的时候对传入的值做判断，今天小编通过一个小例子给大家分享VueJs组件prop验证简单理解，感兴趣的朋友一起看看吧
2017-09-09