第四章 生命周期函数--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 [定义]组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...
随机推荐
- 参考：菜菜的sklearn教学之降维算法.pdf!!
PCA(主成分分析法) 1. PCA(最大化方差定义或者最小化投影误差定义)是一种无监督算法,也就是我们不需要标签也能对数据做降维,这就使得其应用范围更加广泛了.那么PCA的核心思想是什么呢? 例如D ...
- Sqlserver实现故障转移 — AlwaysOn实现故障转移（4）
目的:在已经加域的计算机上安装sqlserver2012,并配置系统级故障转移及数据库,实现AlwayOn. 域控的建立详见:https://www.cnblogs.com/xiaoerlang90/ ...
- I'm using Python 2.7.2 ImportError No module named bz2
安装mongodb的时候 提示错误 这是因为同时装了python2.6和2.7的缘故 sudo cp /usr/lib64/python2.6/lib-dynload/bz2.so /usr/loca ...
- Linux CentOS安装搭建FTP文件服务
本文环境:centos7,IP=192.168.1.11 1.安装vsftpd和默认配置启动 1.1 安装vsftpd yum install -y vsftpd 1.2 启动vsftpd syste ...
- 【神经网络与深度学习】【C/C++】C++日志操作开源函数库之Google-glog
今天想给我的C++项目找一个开源的日志类,用于记录系统日志,结果浪费了半个下午的时间.从网上搜索相关资料,找到以下几个备选方案: 1.log4cplus 下载地址:http://sourceforge ...
- C学习笔记-基础数据结构与算法
数据结构 数据(data)是对客观事物符号表示,在计算机中是指所有能输入的计算机并被计算机程序处理的数据总称. 数据元素(data element)是数据的基本单位,在计算机中通常做为一个整体进行处理 ...
- 包含时间的Json序列化
public static string ObjectToJson<T>(T t) { using (MemoryStream ms = new MemoryStream()) { Dat ...
- Linux 防火墙开放特定端口 (iptables)
1.查看状态:iptables -L -n2.直接编辑:vi /etc/sysconfig/iptables3.端口开放:-A INPUT -m state --state NEW -m tcp -p ...
- Centos 7 下Gitlab 自启动设置
禁止 Gitlab 开机自启动: systemctl disable gitlab-runsvdir.service 启用 Gitlab 开机自启动: systemctl enable gitlab- ...
- Eclipse中格式化代码
Eclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法 格式化代码的时候,右键 --> Source --> Format 能够起效,但 Ctrl+Shift+F不好使. ...