zoukankan      html  css  js  c++  java
  • 8.vue-resource 数据请求基本实现

    1.vue-resource 实现 get, post, jsonp请求:https://github.com/pagekit/vue-resource

    注意: 除了 vue-resource 实现数据 Ajax 请求之外,还可以使用 `axios` 的第三方包实现实现数据的请求

    代码:

    <!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-2.4.0.js"></script>
      <!-- 注意:vue-resource 依赖于 Vue,所以先后顺序要注意  -->
      <!-- 在Vue上挂载了一些属性,比如:this.$http.post -->
      <script src="./lib/vue-resource-1.3.4.js"></script>
    </head>
    
    <body>
      <div id="app">
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="postInfo">
        <input type="button" value="jsonp请求" @click="jsonpInfo">
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {
            getInfo() { // 发起get请求
              //当发起get请求之后, 通过 .then 来设置成功的回调函数
              this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
                //通过 result.body 拿到服务器返回成功的数据
                //console.log(result.body)
              })
            },
            postInfo() { // 发起 post请求,服务器接收表单数据格式的数据:application/x-wwww-form-urlencoded
              //手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了
              //第二个参数为提交给服务器的参数
              //通过 post 方法的第三个参数, { emulateJSON: true } 设置提交的内容类型为普通表单数据格式
              this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
                console.log(result.body)
              })
            },
            jsonpInfo() { //发起JSONP 请求
              this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
                console.log(result.body)
              })
            }
          }
        });
      </script>
    </body>
    </html>
  • 相关阅读:
    BZOJ 1040 (ZJOI 2008) 骑士
    BZOJ 1037 (ZJOI 2008) 生日聚会
    ZJOI 2006 物流运输 bzoj1003
    ZJOI 2006 物流运输 bzoj1003
    NOI2001 炮兵阵地 洛谷2704
    NOI2001 炮兵阵地 洛谷2704
    JLOI 2013 卡牌游戏 bzoj3191
    JLOI 2013 卡牌游戏 bzoj3191
    Noip 2012 day2t1 同余方程
    bzoj 1191 [HNOI2006]超级英雄Hero——二分图匹配
  • 原文地址:https://www.cnblogs.com/yaboya/p/10246548.html
Copyright © 2011-2022 走看看