第四章 生命周期函数--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 [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
随机推荐
- jdk1.8-ArrayDeque
一:类的继承关系 UML图 类的继承关系: )))))) ]) & ()) == ) & ()) == ) & ()] = e) ) & (); return resu ...
- 强大的BeautifulSoup
Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库·它能够通过你喜欢的转换器实现惯用的文档导航 安装BeautifulSoup 推荐使用Beautiful Sou ...
- Django Model 基础数据库操作应用
https://blog.csdn.net/Mrzhangjwei/article/details/53001841 一.数据库操作1.创建model表 基本结构: from django.db im ...
- IE条件注释语句
项目 范例 说明 ! [if !IE] The NOT operator. This is placed immediately in front of the _feature_, _operato ...
- Excel随机数相关
基本函数 RAND() 函数:自动生成一个[0,1)的平均分布随机数(依重新计算而改变) RANDBETWEEN(bottom,top) :返回一个介于指定数字直接的随机数,不会自动改变 INT(nu ...
- Django与Session
Session Session的由来 Cookie虽然在一定程度上解决了"保持状态"的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能 ...
- LeetCode.1154-一年中的第几天(Day of the Year)
这是小川的第410次更新,第442篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第261题(顺位题号是1154).给定表示格式为YYYY-MM-DD的公历日期的字符串日期,返回 ...
- HR,OA,CRM,DRP,ERP什么意思?电商行业的特点?电商行业模式?专业术语?
HR,OA,CRM,DRP,ERP HR----Human Resource人力资源管理 OA----Office Automation办公自动化 CRM---Customer Relationshi ...
- 自然数幂和(递推式k^2方法)
先用这个方法顶一下!
- 统计学习方法 | 第3章 k邻近法 | 补充
namedtuple 不必再通过索引值进行访问,你可以把它看做一个字典通过名字进行访问,只不过其中的值是不能改变的. sorted()适用于任何可迭代容器,list.sort()仅支持list(本身就 ...