第四章 生命周期函数--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 [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
随机推荐
- 【JVM学习笔记】打破双亲委托机制的例子
Tomcat也有自己的类加载器,比如Servlet,这些类加载器就改变了双亲委托模型的默认机制 (该主题有待深入)
- .net core cookie滑动过期设置
HttpContext.SignInAsync( CookieAuthenticationDefaults.AuthenticationScheme, userPrincipal, new Authe ...
- sql注入知识点整理（基础版）
sql注入知识点整理(基础版) 基本步骤 判断是否报错 判断闭合符号 判断注入类型 构建payload 手工注入或者编写脚本 基本注入类型 报错型注入 floor公式(结果多出一个1):and (se ...
- Java 高级 --- 多线程快速入门
这世上有三样东西是别人抢不走的:一是吃进胃里的食物,二是藏在心中的梦想,三是读进大脑的书 多线程快速入门 1.线程与进程区别 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程.线程是一组 ...
- SolidWorks学习笔记7 镜像，阵列
镜像 将特征,面,实体相对于一个平面来复制.修改原来的特征,镜像特征随之改变 阵列 线性阵列 , 在左侧,先激活要阵列的特征,然后点击小柱 然后选择方向1和方向2,该方向的阵列距离和数量(一般使用边线 ...
- Java中String连接性能的分析
总结:如果String的数量小于4(不含4),使用String.concat()来连接String,否则首先计算最终结果的长度,再用该长度来创建一个StringBuilder,最后使用这个String ...
- ciscn-华北赛区-Day1-Web2题解
漏洞点 薅羊毛逻辑漏洞 Cookie伪造 -> JWT python反序列化 -> 反弹shell 薅羊毛逻辑漏洞 打开题目是这样一个页面 其实最初的题目这个募集资金的进度条是没有刷满的, ...
- 安装破解MyEclipse2017CI
一.下载 1.Myeclipse官网下载地址:http://www.myeclipsecn.com/download/ 2.破解补丁链接:https://pan.baidu.com/s/1Ge_fbm ...
- 结合docker做flask+kafka数据接口与压力测试
一.需求 需要做实时数据接入的接口.数据最终要写入库,要做到高并发,数据的完整,不丢失数据. 二.技术选型 1.因为只是做简单的接口,不需要复杂功能,所以决定用flask这个简单的python框架(因 ...
- Spring Boot 五种热部署方式，极速开发就是生产力！
1.模板热部署 在 Spring Boot 中,模板引擎的页面默认是开启缓存的,如果修改了页面的内容,则刷新页面是得不到修改后的页面的,因此我们可以在application.properties中关闭 ...