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

本文链接：https://blog.csdn.net/qq_41968029/article/details/107877942

在原来项目中我发现使用原生的html发送的请求是放在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('传输失败');
                });
            }