黑马vue---33、vue-resource 实现 get, post, jsonp请求

一、总结

一句话总结：

vue-resource使用非常非常非常简单：this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {console.log(result.data)})
//  当发起get请求之后， 通过 .then 来设置成功的回调函数

this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {

    // 通过 result.body 拿到服务器返回的成功的数据

    // console.log(result.body)

})

1、vue-resource的post请求实例？

this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
//  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了

//  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式

this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {

console.log(result.body)

})

2、vue-resource的jsonp请求实例？

this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {

console.log(result.body)

})

3、手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了，如何解决？

通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {

console.log(result.body)

})

二、vue-resource 实现 get, post, jsonp请求

1、相关知识

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

  1. 之前的学习中，如何发起数据请求？
  2. 常见的数据请求类型？ get post jsonp
  3. 测试的URL请求资源地址：
 

2、代码

 <!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，所以先后顺序要注意  -->

   <!-- this.$http.jsonp -->

   <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>
 

黑马vue---33、vue-resource 实现 get, post, jsonp请求的更多相关文章

  1. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  2. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  3. 黑马vue---46、vue使用过渡类名实现动画

    黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...

  4. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  5. 黑马vue---37-38、vue实例的生命周期

    黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...

  6. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  7. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  8. 黑马vue---10-11、Vue实现跑马灯效果

    黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件   v-on   @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...

  9. 黑马vue---1-7、vue杂记

    黑马vue---1-7.vue杂记 一.总结 一句话总结: · 我最大的优势在于潜力,也就是孤独学习的能力.旁观者(l)看的比我清楚. · 那些游戏主播,比如英雄联盟主播,年复一年的玩一个游戏,一个英 ...

  10. vue 学习笔记—Resource

    1.首先是引入  或者用npm来安装  cnpm i vue-resource --save(推荐) 3.提供的api 关于请求写法: get(){ // get请求 this.$http.get( ...

随机推荐

  1. Apache基于域名、端口、IP的虚拟主机配置（Centos 6.5）

    虚拟主机:部署多个站点,每个站点,希望用不同的域名和站点目录,或者是不同的端口,不同的ip,需要虚拟主机功能.一句话,一个http服务要配置多个站点,就需要虚拟主机. 虚拟主机分类:基于域名.基于端口 ...

  2. ubuntu18.04 安装android studio

    首先从官网下载android studio:Android Studio (安装前应先安装JDK环境) 得到android-studio-ide-191.5977832-linux.tar.gz 在安 ...

  3. pycharm连接数据库

    今天说说如何使用pycharm连接oracle数据库 1.首先你需要安装oracle数据库 2.在pycharm中安装cx_Oracle.在file->settings->Project- ...

  4. FPGA学习笔记之按键控制

    参考: [黑金原创教程][FPGA那些事儿-驱动篇I ]实验二:按键模块① - 消抖 源码如下: key_funcmod.v module key_funcmod(clk, rst, key, led ...

  5. Linux命令——yum

    翻译自:20 Linux YUM (Yellowdog Updater, Modified) Commands for Package Management 前言 本篇文章将介绍如何使用RedHat开 ...

  6. RT-Thread--内核移植

    内核移植 内核移植就是指将 RT-Thread 内核在不同的芯片架构.不同的板卡上运行起来,能够具备线程管理和调度,内存管理,线程间同步和通信.定时器管理等功能.移植可分为 CPU 架构移植和 BSP ...

  7. java.lang.AbstractMethodError: org.powermock.api.mockito.internal.mockmaker.PowerMockMaker.isTypeMockable

    [转]https://stackoverflow.com/questions/53539930/java-lang-abstractmethoderror-org-powermock-api-mock ...

  8. TListView控件的ReadOnly属性的一个Bug

    不知道是不是ListView的 ReadOnly属性的一个bug 1.Form上一个ListView,如图设置 2.在FormCreate事件中写如下代码:     ListView1->Rea ...

  9. P2085 最小函数值[优先队列]

    题目描述 有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个(如有重复的要输出多个 ...

  10. Vue中img的src属性绑定

    正确:<img :src=" 'files/'+value.src "> 或 <img :src="value.src">错误:< ...