介绍
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Github开源地址： https://github.com/axios/axios
vue-resource是vue 1推荐使用的，而axios是vue 2.0 推荐使用的，其实两个都可以向后端发送请求，获取响应。
安装
安装参考：https://blog.csdn.net/cnds123321/article/details/104031920
语法
get请求的语法
使用拼接URL的方式传递参数：
// 发送GET请求
axios.get("url?param1=value1¶m2=value2")
.then(function (res) {
alert(res);
}).catch(function (res) {
alert(res);
});使用params对象传递参数：
// 发送GET请求
axios.get("url",{
params:{
param1:value1,
param2:value2
}
}).then(function(res){
alert(res);
}).catch(function (res) {
alert(res);
});POST请求的语法
// 发送GET请求
axios.post("url",{
param1:value1,
param2:value2
}).then(function(res){
alert(res);
}).catch(function (res) {
alert(res);
});代码解释说明：
- 其中get()和post()分别表示不同的请求方法。get请求有两种方式传递参数。
- then()方法内有一个参数表示响应成功的回调函数。
- catch()方法内有一个参数表示响应失败的回调函数。
实例
特别注意：本实例后台是使用的Java的servlet
GET请求
index.html
<!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 () {
// 发送GET请求
axios.get('http://localhost:8080/loginServlet', {
params: {
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) {
console.log(reason)
})
}
}
})
</script>
</body>
</html>浏览器展示：
扫描二维码关注公众号，回复：
8698403 查看本文章
POST请求
index.html
注意需要安装qs.js。
<!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>
执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));API
为方便使用，官方为所有支持的请求方法提供了别名，可以直接使用别名来发起请求：
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])注意：在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
如果对完整源码有兴趣。
可搜索微信公众号【Java实例程序】或者扫描下方二维码关注公众号获取更多。
注意：在公众号后台回复【CSDN202001182026】可获取本节源码。
