1.vue-resource 实现 get, post, jsonp请求

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

2.请求中的注意事项

　　1>配置全局的,请求数据接口,所有的相对路径的请求都会加上该地址

//配置全局的,请求数据接口,所有的相对路劲的请求都加上'http://vue.studypr.io/api/'

//相对路径  请求url前面没有加/

            Vue.http.options.root='http://vue.studypr.io/api/';

　　2>全局启用  emulateJSON请求方式

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为Content-Type，就像普通的HTML表单一样。

   Vue.http.options.emulateJSON=true

　　3>vue-resource 实现 get, post, jsonp请求,的返回值　

　　以post请求添加商品为例子：

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

                            if(result.body.start === 0) {

                                //成功 重新获取所有的数据

                                this.getAllList()

                            } else {

                                alert('添加失败')

                            }

                        })

vue.js_07_vue-resource的请求方式的更多相关文章

  1. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  2. http状态码+http请求方式

    一.http状态码 2开头 (请求成功)表示成功处理了请求的状态代码. 200   (成功)  服务器已成功处理了请求. 通常,这表示服务器提供了请求的网页. 201   (已创建)  请求成功并且服 ...

  3. java、ajax 跨域请求解决方案（'Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.）

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  4. axios的数据请求方式及跨域

    express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问 数据的请 ...

  5. leyou_04_vue.js的ajax请求方式

    1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...

  6. 限制action所接受的请求方式或请求参数

    原文:http://www.cnblogs.com/liukemng/p/3726897.html 2.限制action所接受的请求方式(get或post): 之前我们在HelloWorldContr ...

  7. Android——JDK的get请求方式

    layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  8. 第二节（RequestMapping请求方式）学习尚硅谷-springmvc视频教程

    项目中,创建测试类SpringMVCTest @Controller @RequestMapping("/springmvc1") public class SpringMVCTe ...

  9. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

随机推荐

  1. 「STL」bitset正传

    前言 之前一些需要转二进制来解决的题目我看到很多大佬用了bitset. 然而我并不会这东西.看上去很高级的样子…… 改题改累了来学习一下233. 正文 一.bitset的构造 bitset有三种构造方 ...

  2. vuecli脚手架+vue+vuex实现vue驱动的demo。

    哎呀呀呀,现在大家都要会Vue ||  React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...

  3. error C2712: Cannot use __try in functions that require object unwinding

    转自VC错误:http://www.vcerror.com/?p=52 问题描述: error C2712: Cannot use __try in functions that require ob ...

  4. VS2010-MFC（常用控件：滚动条控件Scroll Bar）

    转自:http://www.jizhuomi.com/software/191.html 滚动条控件简介 滚动条大家也很熟悉了,Windows窗口中很多都有滚动条.前面讲的列表框和组合框设置了相应属性 ...

  5. iOS开发UITableView随笔

    1.设置cell的间隔 - (void)setFrame:(CGRect)frame{ frame.size.height -=; [super setFrame:frame]; } 2.刷新row或 ...

  6. 创建自定义ssl证书用于https

    这里,不探究证书原理.我们要完成的任务是,自己充当CA,然后签出证书供服务器使用. 本次教程是在windows实现,实验之前,确认自己的电脑中有openssl程序.如果没有,博主帮你准备了一个:htt ...

  7. 【转】5G标准——独立组网(SA)和非独立组网(NSA)

    独立组网模式(SA):指的是新建5G网络,包括新基站.回程链路以及核心网.SA引入了全新网元与接口的同时,还将大规模采用网络虚拟化.软件定义网络等新技术,并与5GNR结合,同时其协议开发.网络规划部署 ...

  8. webjars和springboot热启动

    webjars WebJars将Web前端Javascript和CSS等资源打包成Java的Jar包, 以便能使Maven的依赖管理支持静态JavaScript库/CSS库,比如jQuery.layu ...

  9. 4_6.springboot2.xWeb开发之错误处理机制

    1.SpringBoot默认的错误处理机制 默认效果:1).浏览器,返回一个默认的错误页面 浏览器发送请求的请求头: ​ 2).如果是其他客户端,默认响应一个json数据 原理: ​ 默认情况下,Sp ...

  10. C++开发系列-内联函数

    内联函数 C++使用内联函数来替代宏代码片段. #include <iostream> int main(){ printfA(); return 0; } inline void pri ...