第四章 生命周期函数--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 [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
随机推荐
- Ubuntu腾讯云主机安装分布式memcache服务器，C#中连接云主机进行存储的示例
Ubuntu腾讯云主机安装分布式memcache服务器,C#中连接云主机进行存储的示例(github代码:https://github.com/qq719862911/MemcacheTestDemo ...
- 【SVN】导出项目后报错汇总
原文链接 1.jsp页面内:标点符号,引入报错 解决方法:关闭此项目的jsp验证,右键,最下面一个,Verification,右边一溜只留一个dtd就好 2. 编码问题-乱码 刚拉下来的项目编码可能与 ...
- P5019 铺设道路
#include<bits/stdc++.h> using namespace std; ]; ; int main() { cin>>n; ;i<=n;i++) cin ...
- C学习笔记-指针
指针的概念 指针也是一个变量,指针变量的值是另一个变量的地址 换句话说就是,指针存放的是一个内存地址,该地址指向另一块内存空间 指针变量的定义 指向一个变量的变量 int *p = NULL; p = ...
- yum tenxun ntpdate 时间同步
centos7 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.cloud.tencent.com/repo/centos7_base ...
- linux批量删除
find . -name "*.bcp" | xargs rm -rf "*.bcp"
- C语言|作业07
一.本周作业头 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://i-beta.cnblogs.com/posts/edit;postId=11811545 我在这个课程的 ...
- Fiddle-常用设置和操作记录
1.导出证书: 2.清空屏幕: 3.字段认识 4.保存会话: 5.解码
- 小记--------CDH版本启动cloudera manager UI界面
首先需要启动mysql源数据库 server所在服务器的路径:/opt/cm-5.14.0/etc/cloudera-scm-server 下 查看配置文件: db.properties 查看my ...
- 02：linux常用命令
1.1 linux查看系统基本参数常用命令 1.查看磁盘 [root@linux-node1 ~]# df -hl Filesystem Size Used Avail Use% Mounted on ...