首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue axios post方式表单数据以json格式提交

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