<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
//http请求
//Vue-Resource提供的请求方法有：
//get(url, [options])
//head(url, [options])
//delete(url, [options])
//jsonp(url, [options])
//post(url, [body], [options])
//put(url, [body], [options])
//patch(url, [body], [options])
//第一组参数：url,请求路径
//第一种使用方式:静态调用
Vue.http.get('07-http.txt').then(function(res){
//请求成功回调
console.log(res.body);
/*
返回的结果：
body vue解析后的服务器返回的数据
bodyText 服务器返回的数据
header 服务器响应的头部
status 响应的状态码
data vue解析后返回的数据
* */
}).catch(function(err){
//请求失败回调
console.log(err)
alert('错误代码：' + err.status)
})
//第二种使用方式:vue实例调用须加$
var vm = new Vue({
el:"#app",
created(){
//http请求
this.$http.get('07-http.txt').then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
})
}
})
</script>
</body>
</html>
get请求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:""
},
created(){
// this.$http({
// url:'01-http.php?username='+encodeURI('张三')+"&password=1234",//请求路径
// method:"get"//请求方法
// }).then(function(res){
// console.log(res);
// this.msg=res.bodyText
// });
//GET简写：
this.$http.get('01-http.php?username='+encodeURI('张三')+"&password=1234").then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
})
}
})
</script>
</body>
</html>
网友评论