forked from Francis0Cheng/Vue-Personal-Notes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
17.vue-resouce基本使用.html
49 lines (48 loc) · 1.96 KB
/
17.vue-resouce基本使用.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="Get method" @click="getInfo">
<input type="button" value="Post method" @click="postInfo">
<input type="button" value="Jsonp 请求" @click="jsonpInfo">
</div>
<script>
var vm = new Vue(
{
el: '#app',
data: {
},
methods: {
getInfo(){
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
//通过result.body拿到服务器返回的成功的数据
console.log(result)
})
},
postInfo(){
//手动发起的post请求默认没有表单格式，有的服务器处理不了
//通过设置post方法第三个参数{emulateJSON: true}设置提交的内容类型为普通表单数据格式
//三个参数，第一个参数是url地址，第二个参数是提交的数据内容，第三个是提交的格式
this.$http.post('http://vue.studyit.io/api/post',{},{emulateJSON:true}).then(result=>{
console.log(result.body)
})
},
jsonpInfo(){
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result=>{
console.log(result.body)
})
}
},
}
);
</script>
</body>
</html>