黑马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( ...
随机推荐
- 开源项目hutool之zip_slip漏洞
今天突然看到了去年写的一篇漏洞分析文章,搬到博客上 ---------------- Hutool是Github上的一个开源项目,是一个java的工具包,对文件.流.加密解密.转码.正则.线程.XML ...
- Oracle数据库账户口令复杂度-等保测评之身份鉴别
1. 默认情况下数据库没有启用密码验证函数功能,可通过下面sql查询 SQL> select limit from dba_profiles where RESOURCE_NAME='P ...
- win10 下的YOLO v3 的编译与使用
部署环境:win10 +CUDA 10.0 + vs2017 + opencv 3.4.0 代码版本是 https://github.com/AlexeyAB/darknet 1.初始准备 (1)下 ...
- thefuck安装和使用(ubuntu)
系统环境(已测试可用): ubuntu 18.04 lts (server或desktop),ubuntu 19.04(server或desktop) sudo apt update sudo apt ...
- Python_赋值运算符
1.赋值运算符
- Shell脚本字符串匹配及日常命令工具 - 用法总结（技巧指南）
Shell提供了很多字符串和文件处理的命令,如awk.expr.grep.sed等命令,还有文件的排序.合并和分割等一系列的操作命令.下面重点总结下Shell字符串处理.文本处理以及各类命令及函数用法 ...
- Nginx access_log日志添加返回字段
主要为方便单用户请求日志回溯分析 记录用户标记. 将用户信息打印在access_log 日志里. 步骤: 1.重写nginx 的log格式 一般是地址是 /etc/nginx/conf.d/ng ...
- python 多分类任务中按照类别分层采样
在机器学习多分类任务中有时候需要针对类别进行分层采样,比如说类别不均衡的数据,这时候随机采样会造成训练集.验证集.测试集中不同类别的数据比例不一样,这是会在一定程度上影响分类器的性能的,这时候就需要进 ...
- 前端处理：elementUI 表格索引代表第几条数据
分析:表格结合分页 知识点:1.表格的自定义索引(索引以当前行的行号作为参数)number, Function(index)该属性传入数字时,将作为索引的起始值.也可以传入一个方法,它提供当前行的行号 ...
- JS转换HTML转义符 [转]
最近有个需求,就是后台系统编辑文章内容存到后台,前端这边获取到是转义后的字符串,如果直接将转义后的内容写在页面上,html标签不会被解析.网上找到觉得不错的功能函数,这里记录一下 //去掉html标签 ...