vue-resource 官网 https://github.com/pagekit/vue-resource

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 注意:vue-resource依赖与Vue,所以先后顺序要注意,先导入vue,再导入vue-resource -->
<!-- this.$http.jsonp -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> -->
<script src="./lib/vue-resource-1.5.1.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:{
msg:''
},
methods:{
getInfo(){//发起get请求
//当发起get请求之后,通过then来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result){
//通过result body 拿到服务器返回的成功的数据
// console.log(result)
})
},
postInfo(){//发起post请求
//手动发起的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>

请求不成功,控制台输出:

已拦截跨源请求:同源策略禁止读取位于 http://vue.studyit.io/api/getlunbo 的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。

未解决

第四章 生命周期函数--35 vue-resource发起get、post、jsonp请求的更多相关文章

  1. 第四章 生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理

  2. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  3. [Vue] : vue-resource 实现 get, post, jsonp请求

    vue-resource 实现 get, post, jsonp请求 常见的数据请求类型:get,post,jsonp 除了vue-resource之外,还可以使用axios的第三方包实现实现数据的请 ...

  4. 生命周期函数以及vue的全局注册

    beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...

  5. 第四章、深入理解vue组件

    4-1.使用组件的细节 a.使用is解决html出现bug 如下 table下面应该为tr,所以页面渲染的时候没有找到tr是有问题的,所以是有小bug,所以table中必须是tr b.改上面bug,t ...

  6. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  7. 【Unity基础知识】认识常用的生命周期函数(Awake、Start、Update...)

    一.了解帧的概念 游戏的本质就是一个死循环 每一次循环都会处理游戏逻辑 并 更新一次游戏画面 之所以能看到画面在动 是因为 切换画面速度达到一定速度时 人眼就会认为画面是动态且流畅的 一帧就是执行了一 ...

  8. vuejs生命周期函数

    生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单 ...

  9. 十二、React 生命周期函数

    React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...

随机推荐

  1. linux上wps2019不能启动解决方法

    本人linux上的wps2016升级成wps2019后启动不了,双击图标没反应,在命令行输入wps,提示"/lib64/libc.so.6: version `GLIBC_2.18' not ...

  2. 转-Uptime与数据中心等级认证

    1 数据中心等级认证 随着数据中心的蓬勃发展,越来越多的标准被制定出具.其中,Uptime Tier认证在业内是认同度最高的标准.以前,Uptime在中国的宣传很少,很多人对Uptime及其认证体系不 ...

  3. PJzhang:如何在裸奔的年代找到一些遮羞布

    猫宁!!! 很久以前的一篇,搬过来. 我一直在“裸奔”,而且很久了,只是不太愿意承认. 想起了“皇帝的新装”,好奇何种经历和灵感让安徒生写出了如此精彩的故事. 一次百度了一个商品,不久接到了大规模电话 ...

  4. 【AMAD】import-string -- 通过字符串来import一个对象

    动机 简介 用法 个人评分 动机 一些情况下,你不能直接使用from ... import ...来引用对象. 比如在循环引用的情况下. 比如在一些settings文件配置中. 这时候需要另一种办法. ...

  5. 【MapReduce】三、MapReduce运行机制

      通过前面对map端.reduce端以及整个shuffle端工作流程的介绍,我们已经了解了MapReduce的并行运算模型,基本可以使用MapReduce进行编程,那么MapRecude究竟是如何执 ...

  6. ip速度检测与云主机|VPS的抉择:bandwagonhost digitalocean hostWind Vultr Linode

    最近的梯子断了,网站又被注销了.又到了挑vps的时间了.其实, 这些东西,烦死人了.挺浪费生命的. 首先速度测试, MTR测试 网站速度测试 17CE. http://tool.chinaz.com/ ...

  7. 编译FFMPEG错误对策

    在MINGW32下编译ffmpeg-2.1.1.tar.bz2 step1: ./configure   --prefix=/home/Administrator/install --extra-cf ...

  8. mac 上iterm终端连接Linux服务后 中文为乱码问题

    https://www.jianshu.com/p/8b00f71b2177 编辑 ssh 配置vim /etc/ssh/ssh_config修改如下:Host *#SendEnv LANG LC_* ...

  9. [AGC040C] Neither AB nor BA

    Description 一个长度为 n 的字符串是好的当且仅当它由 'A', 'B', 'C' 组成,且可以通过若干次删除除了"AB"和"BA"的连续子串变为空 ...

  10. [BZOJ 1563] [NOI 2009] 诗人小G(决策单调性)

    [BZOJ 1563] [NOI 2009] 诗人小G(决策单调性) 题面 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以放的句子数目是没有限制的.小 G ...