错误
错误代码
<!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对象数据。
正确代码的请求头如下：
特别是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，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。
解决一
正确代码一
<!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浏览器不支持。
解决二
第二种解决方案要使用qs，所以要先安装qs。
要使用npm安装qs就要安装npm，npm安装教程参考：https://blog.csdn.net/cnds123321/article/details/103988059
安装成功
代码，只需要处理下面两处即可。
正确代码二
<!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>