引入

1
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

get请求

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
    <p style="color: red">{{myInfo}}</p>
    <button @click="get()">获取</button>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            myInfo:'看这里'
        },
        methods:{
            get: function () {
                let _this = this;
                this.$http
                    .get('https://www.zoutl.cn/getFruitListJson')
                    .then(function (result) {
                        _this.myInfo = result.data;
                    }, function () {
                        console.log('请求失败');
                    });
            }
        }
    })
</script>
</body>
</html>

img

post请求

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app">
    <p style="color: red">{{myInfo}}</p>
    <button @click="post()">获取</button>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            myInfo: '看这里'
        },
        methods: {
            post: function () {
                let _this = this;
                this.$http
                    .post('https://www.zoutl.cn/getFruitJson2',
                        //传递的数据
                        {
                            id: 3,
                            name: '香蕉',
                            num: 6
                        },
                        //如果Web服务器无法处理编码为 application/json 的请求，可以启用 emulateJSON 选项
                        {
                            emulateJSON: true
                        }
                    )
                    .then(function (result) {
                        _this.myInfo = result.data;
                    }, function () {
                        console.log('请求失败');
                    });
            }
        }
    })
</script>
</body>
</html>

img