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>
  • 相关阅读:
    ros之MarkerArray使用
    boost之进度条工具
    opencv之对比度和亮度的调节
    opencv之通道分离和合并
    opencv之图像叠加与图像混合
    opencv之绘制基本图形
    opencv之几种常用的类型
    opencv之cv::Mat创建
    ros之自定义message
    opencv与eigen类型转换
  • 原文地址:https://www.cnblogs.com/yaboya/p/10246548.html
Copyright © 2011-2022 走看看