黑马vue---33、vue-resource 实现 get, post, jsonp请求
黑马vue---33、vue-resource 实现 get, post, jsonp请求
一、总结
一句话总结：
vue-resource使用非常非常非常简单：this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {console.log(result.data)})
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
1、vue-resource的post请求实例？
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
// 手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
// 通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
2、vue-resource的jsonp请求实例？
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
3、手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了，如何解决？
通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
二、vue-resource 实现 get, post, jsonp请求
1、相关知识
除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求
- 之前的学习中，如何发起数据请求？
- 常见的数据请求类型？ get post jsonp
- 测试的URL请求资源地址：
- get请求地址： http://vue.studyit.io/api/getlunbo
- post请求地址：http://vue.studyit.io/api/post
- jsonp请求地址：http://vue.studyit.io/api/jsonp
2、代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 -->
<!-- this.$http.jsonp -->
<script src="./lib/vue-resource-1.3.4.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: {},
methods: {
getInfo() { // 发起get请求
// 当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
// console.log(result.body)
})
},
postInfo() { // 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 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>
黑马vue---33、vue-resource 实现 get, post, jsonp请求的更多相关文章
- 黑马vue---31-32、vue过滤器实例
黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- 黑马vue---46、vue使用过渡类名实现动画
黑马vue---46.vue使用过渡类名实现动画 一.总结 一句话总结: vue动画的过渡类名的时间点中没有设置样式的话就是默认的样式 使用 transition 元素,把 需要被动画控制的元素,包裹 ...
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- 黑马vue---37-38、vue实例的生命周期
黑马vue---37-38.vue实例的生命周期 一.总结 一句话总结: created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 moun ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果 一.总结 一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
- 黑马vue---1-7、vue杂记
黑马vue---1-7.vue杂记 一.总结 一句话总结: · 我最大的优势在于潜力,也就是孤独学习的能力.旁观者(l)看的比我清楚. · 那些游戏主播,比如英雄联盟主播,年复一年的玩一个游戏,一个英 ...
- vue 学习笔记—Resource
1.首先是引入 或者用npm来安装 cnpm i vue-resource --save(推荐) 3.提供的api 关于请求写法: get(){ // get请求 this.$http.get( ...
随机推荐
- 数据库事务ACID特性(原子性、一致性、隔离性、持久性)
ACID特性: 原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability) 原子性:一个事务必须被视为一个不可分割的最小工作单元,整个 ...
- layui 后台分页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android笔记（三十五） Android中AsyncTask
AsyncTask<Params,Progress,Result> 是一个抽象类,通常继承这个抽象类需要指定如下几个泛型参数: 1. Params :启动任务时出入参数的类型 2. P ...
- redis重命名flushall和flushdb重启失败
redis重命名flushall和flushdb,将使用中的redis重命名redis会启动失败并且log中有报错 # Unknown command 'flushall' reading the a ...
- Aure Event Hubs小白完全入门指南
refer to https://www.cnblogs.com/mysunnytime/p/11634815.html?from=groupmessage&isappinstalled=0 ...
- socket、端口、进程的关系
本文属网络编程部分.socket的引入是为了解决不同计算机间进程间通信的问题. 端口是TCP/IP协议中的概念,描述的是TCP协议上的对应的应用,可以理解为基于TCP的系统服务,或者说系统进程!如下图 ...
- layui table 跨页记忆选择
layui 表格功能目前默认不支持跨页记忆选择 下面来实现layui table跨页记忆选择实现 基于layui版本 1.4.5 表格跨页通用方法 //表格分页复选框 layui.define(['j ...
- 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象
JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...
- SQLServer常见查询问题
http://bbs.csdn.net/topics/340078327 1.生成若干行记录 --自然数表1-1M CREATE TABLE Nums(n int NOT NULL PRIMAR ...
- java application指的到底是什么？
在Java语言中,能够独立运行的程序称为Java应用程序(Application).Java语言还有另外一种程序——Applet程序.Applet程序(也称Java小程序)是运行于各种网页文件中,用于 ...