使用Vue-Resource实现Ajax

93 阅读 0 评论 62 点赞

我是靠谱客的博主搞怪鸵鸟，这篇文章主要介绍使用Vue-Resource实现Ajax，现在分享给大家，希望可以做个参考。

文章目录

- - - - 1、get方式
      - 2、post方式
      - 3、jsonp方式

1、get方式

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            arr:[]
        },
        methods:{},
        created(){
                this.$http.post('getUsers',{responseType:'json'}).then(function(response){
                    this.arr = response.body;
                })
        }
    })
</script>

2、post方式

复制代码

1
2
3
4
5
6
7
8
9
10
11
postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}

3、jsonp方式

复制代码

1
2
3
4
5
6
7
jsonpInfo() { // JSONP形式从服务器获取数据
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}