欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用vue改造servlet项目遇到formdata数据;使用axios发送formdata数据

程序员文章站 2022-06-22 08:11:10
在原来项目中我发现使用原生的html发送的请求是放在formdata下面的而在axios中默认将数据放到payload下面,这时候我们就需要将数据放到formdata下面login: function () { var formData = new FormData(); formData.append("username", this.username); formData.append("pas...

在原来项目中我发现使用原生的html发送的请求是放在formdata下面的

使用vue改造servlet项目遇到formdata数据;使用axios发送formdata数据

而在axios中默认将数据放到payload下面,这时候我们就需要将数据放到formdata下面

login: function () {
                axios({
                    url: 'login',
                    method: 'post',
                    data: {
                        username: this.username,
                        password: this.password
                    },
                    //重点
                    transformRequest: [
                        function (data) {
                            let ret = '';
                            for (let it in data) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                            }
                            ret = ret.substring(0, ret.lastIndexOf('&'));
                            return ret
                        }
                    ],
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                    //重点
                }).then(res => {
                    if (res.data.code === 0){
                        window.location.href = "index.jsp"
                    }else {
                        alert("登录失败")
                    }
                })
            }

这样一转换,后台的servlet就可以收到数据了

方法二:

login: function () {
                var formData = new URLSearchParams();
                formData.append("username", this.username);
                formData.append("password", this.password);
                axios({
                    url: 'login',
                    method: 'post',
                    data: formData,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    if (res.data.code === 0){
                        window.location.href = "index.jsp"
                    }else {
                        alert("登录失败")
                    }
                })

vue-resourse:

在请求时设置emulateJSON:true

login: function () {
                this.$http.post('login', {
                        username: this.username,
                        password: this.password
                },{emulateJSON:true}).then(function (data) {
                    if (data.data.id == 1) {
                        window.location.href="index.jsp";
                    } else {
                        alert(data.data.message);
                    }
                }, function () {
                    console.log('传输失败');
                });
            }

 

 

本文地址:https://blog.csdn.net/qq_41968029/article/details/107877942

相关标签: 笔记