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

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

...

错误

错误代码

<!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请求接收不到参数

正确代码二

<!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的axios向后台发送POST请求接收不到参数

错误

错误代码

原因

解决一

正确代码一

解决二

正确代码二

Axios使用post发送请求，后端接收不到的问题 404

vue axios.post请求后端接收不到参数问题

Axios发送POST请求报错，后端接收不到参数响应404

vue整合axios post请求后端接收不到参数

Vue.js + axios发post请求时后端接收不到参数解决办法

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

解决SpringMVC接收不到axios发送post请求的数据问题

解决Vue axios post请求,后台获取不到数据的问题方法

解决angular的post请求后SpringMVC后台接收不到参数值问题的方法

axios发送post请求springMVC接收不到参数的解决方法