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

Vue的axios向后台发送POST请求接收不到参数

程序员文章站 2024-01-20 21:02:16
...

错误

Vue的axios向后台发送POST请求接收不到参数

错误代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Vue学习</title>
    <!-- 引入vue.js -->
    <script src="js/vue.min.js"></script>
    <!--引入axios.js插件-->
    <script src="js/axios.min.js"></script>
    <!-- 使用CDN引入Vue.js -->
    <!--<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>-->
    <!--使用CDN引入axios.js-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>
<body>
<div id="app">
    <p>登录成功用户(用户名:admin;密码:admin)</p>
    用户名:<input type="text" v-model="user"><br>
    密码:<input type="password" v-model="password"><br>
    <input type="button" value="登录" @click="login()">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: '',
            password: ''
        },
        methods: {
            login: function () {
                // 发送POST请求
                axios.post('http://localhost:8080/loginServlet',{
                    user:this.user,
                    password:this.password
                }).then(function (res) {
                    if (res.data.ok != 1) {
                        alert(res.data.msg);
                    } else {
                        alert(res.data.msg);
                    }
                }).catch(function (reason) {
                   alert(reason)
                });
            }
        }
    });
</script>
</body>
</html>

原因

可以看到错误代码的请求头如下:

特别是Content-Type的值为"application/json;charset=UTF-8",传的是json对象数据。

Vue的axios向后台发送POST请求接收不到参数

正确代码的请求头如下:

Vue的axios向后台发送POST请求接收不到参数

特别是Content-Type的值为"application/x-www-form-urlencoded;charset=UTF-8",传的是表单对象数据。

jquery在执行post请求时,会设置Content-Type为application/x-www-form-urlencoded,所以服务器能够正确解析,而使用原生ajax、axios请求时,如果不显示的设置Content-Type,那么默认是text/plain,这时服务器就不知道怎么解析数据了,所以才只能通过获取原始数据流的方式来进行解析请求数据。

解决一

Vue的axios向后台发送POST请求接收不到参数

正确代码一

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Vue学习</title>
    <!-- 引入vue.js -->
    <script src="js/vue.min.js"></script>
    <!--引入axios.js插件-->
    <script src="js/axios.min.js"></script>
    <!-- 使用CDN引入Vue.js -->
    <!--<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>-->
    <!--使用CDN引入axios.js-->
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
</head>
<body>
<div id="app">
    <p>登录成功用户(用户名:admin;密码:admin)</p>
    用户名:<input type="text" v-model="user"><br>
    密码:<input type="password" v-model="password"><br>
    <input type="button" value="登录" @click="login()">
</div>
<script>
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    Vue.prototype.$axios = axios;
    new Vue({
        el: '#app',
        data: {
            user: '',
            password: ''
        },
        methods: {
            login: function () {
                var params = new URLSearchParams();
                params.append("user", this.user);
                params.append("password", this.password);
                // 发送POST请求
                axios.post('http://localhost:8080/loginServlet', params).then(function (res) {
                    if (res.data.ok != 1) {
                        alert(res.data.msg);
                    } else {
                        alert(res.data.msg);
                    }
                }).catch(function (reason) {
                    alert(reason)
                });
            }
        }
    });
</script>
</body>
</html>

这种方法后台能够接收到数据,请求成功,但是兼容性不好,IE浏览器不支持。

Vue的axios向后台发送POST请求接收不到参数

解决二

第二种解决方案要使用qs,所以要先安装qs。

要使用npm安装qs就要安装npm,npm安装教程参考:https://blog.csdn.net/cnds123321/article/details/103988059

Vue的axios向后台发送POST请求接收不到参数

安装成功

Vue的axios向后台发送POST请求接收不到参数

代码,只需要处理下面两处即可。

Vue的axios向后台发送POST请求接收不到参数

Vue的axios向后台发送POST请求接收不到参数

正确代码二

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Vue学习</title>
    <!-- 引入vue.js -->
    <script src="js/vue.min.js"></script>
    <!--引入axios.js插件-->
    <script src="js/axios.min.js"></script>
    <!--引入qs.js-->
    <script src="js/qs.js"></script>
</head>
<body>
<div id="app">
    <p>登录成功用户(用户名:admin;密码:admin)</p>
    用户名:<input type="text" v-model="user"><br>
    密码:<input type="password" v-model="password"><br>
    <input type="button" value="登录" @click="login()">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: '',
            password: ''
        },
        methods: {
            login: function () {
                var postData = window.Qs.stringify({
                    user: this.user,
                    password: this.password
                });
                // 发送POST请求
                axios.post('http://localhost:8080/loginServlet', postData).then(function (res) {
                    if (res.data.ok != 1) {
                        alert(res.data.msg);
                    } else {
                        alert(res.data.msg);
                    }
                }).catch(function (reason) {
                    alert(reason)
                });
            }
        }
    });
</script>
</body>
</html>

 

相关标签: Vue 异常