第四章 生命周期函数--35 vue-resource发起get、post、jsonp请求
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请求的更多相关文章
- 第四章 生命周期函数--36 结合Node手写JSONP服务器剖析JSONP原理
- vue.js的ajax和jsonp请求
首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...
- [Vue] : vue-resource 实现 get, post, jsonp请求
vue-resource 实现 get, post, jsonp请求 常见的数据请求类型:get,post,jsonp 除了vue-resource之外,还可以使用axios的第三方包实现实现数据的请 ...
- 生命周期函数以及vue的全局注册
beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...
- 第四章、深入理解vue组件
4-1.使用组件的细节 a.使用is解决html出现bug 如下 table下面应该为tr,所以页面渲染的时候没有找到tr是有问题的,所以是有小bug,所以table中必须是tr b.改上面bug,t ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- 【Unity基础知识】认识常用的生命周期函数（Awake、Start、Update...）
一.了解帧的概念 游戏的本质就是一个死循环 每一次循环都会处理游戏逻辑 并 更新一次游戏画面 之所以能看到画面在动 是因为 切换画面速度达到一定速度时 人眼就会认为画面是动态且流畅的 一帧就是执行了一 ...
- vuejs生命周期函数
生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单 ...
- 十二、React 生命周期函数
React生命周期函数: [官方文档]:https://reactjs.org/docs/react-component.html [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
随机推荐
- VS2015服务器资源管理器连接Mysql数据库
下载安装文件mysql-for-visualstudio-1.2.3.msi 下载成功后执行安装,选择change-->选择Custom安装成功后,发现vs中没有效果. 注意这里再次执行安装文件 ...
- YAML基础知识及搭建一台简洁版guestbook
一,前言 前面我们已经搭建过简易版k8s集群了,在此基础上可以搭建一个简洁版guestbook ,以便来学习k8s创建pod的整个过程. 二,在此之前,我们还需要学习一下YAML基础知识 YAML 基 ...
- （2）网络基础之IP
IP分为IPV4和IPV6. 以下只讲IPV4,IPV6后期会重新分出来 (以下均为个人理解,如果有误,欢迎提出.也希望如果转载,能通知我并注明转载信息,毕竟字也是我一个个码出来的.谢谢) IPV4地 ...
- stack smashing detected解决过程
在执行程序结束return 0 之后出现上图问题.主要原因是在程序中存在数组越界. 解决方法: 1. 查看定义的结构体内buffer大小,为4096字节 typedef struct { UINT32 ...
- Java中对比单继承与多继承的优劣，以及java的解决方案
继承是一种面相对象的基本特征之一,但在具体语言的语法设计中有两种方式:单继承和多继承. 所谓多继承是指一个子类可以拥有多个父类:单继承则是一个子类只拥有一个父类. 单继承与多继承的优劣: 多继承优点在 ...
- flink部署
参考: https://ververica.cn/developers-resources/ #flink参数 https://blog.csdn.net/qq_35440040/article/de ...
- ASP.NET Core中使用Autofac进行属性注入
一些无关紧要的废话: 作为一名双修程序员(自封的),喜欢那种使用Spring的注解形式进行依赖注入或者Unity的特性形式进行依赖注入,当然,形式大同小异,但结果都是一样的,通过属性进行依赖注入. A ...
- python-bioInfo-codes-2
1. _tkinter.TclError: no display name and no $DISPLAY environment variable 解决方案: import matplotlibma ...
- 3d旋转焦点图
在线演示 本地下载
- （转载）sublime3安装markdown插件
原文链接 http://www.jianshu.com/p/335b7d1be39e?utm_source=tuicool&utm_medium=referral 最近升级到了 Sublime ...