Vue.js Ajax(axios) GET和post请求
使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
vue.js 要实现异步加载需要使用到 vue-resource 库，访问：https://www.runoob.com/vue2/vuejs-ajax.html
vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
- GET 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Ajax</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
{{ info }}
</div>
<script type = "text/javascript">
new Vue({
el: '#app',
data () {
return {
info: ""
}
},
mounted () {
axios({
method:'get',
url:'https://www.runoob.com/try/ajax/json_demo.json'
}).then(function(res){
console.log(res);
this.info = res
document.write(res.data.name);
},function(){
console.log('请求失败处理');
});
}
})
</script>
</body>
</html>
- POST 请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Ajax</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="post()" value="点我异步获取数据(Post)">
</div>
<script type = "text/javascript">
new Vue({
el: '#app',
data () {
return {
info: ""
}
},
methods:{
post:function(){
//发送 post 请求
axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php', {
firstName: 'Fred', // 参数 firstName
lastName: 'Flintstone' // 参数 lastName
})
.then(function (response) {
console.log(response);
this.info = response
document.write(response.data.name);
document.write(response.data.url);
})
.catch(function (error) {
console.log(error);//请求失败处理
});
}
}
})
</script>
</body>
</html>
2154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
