vue--vue-resource实现 get, post, jsonp请求
vue-resource 实现 get, post, jsonp请求
除了 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
- JSONP的实现原理
- 由于浏览器的安全性限制,不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口,浏览器认为这种访问不安全;
- 可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script标签不存在跨域限制,这种数据获取方式,称作JSONP(注意:根据JSONP的实现原理,知晓,JSONP只支持Get请求);
- 具体实现过程:
- 先在客户端定义一个回调方法,预定义对数据的操作;
- 再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
- 服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
- 客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到JSONP的数据了;
- 带大家通过 Node.js ,来手动实现一个JSONP的请求例子;
const http = require('http');
// 导入解析 URL 地址的核心模块
const urlModule = require('url');
const server = http.createServer();
// 监听 服务器的 request 请求事件,处理每个请求
server.on('request', (req, res) => {
const url = req.url;
// 解析客户端请求的URL地址
var info = urlModule.parse(url, true);
// 如果请求的 URL 地址是 /getjsonp ,则表示要获取JSONP类型的数据
if (info.pathname === '/getjsonp') {
// 获取客户端指定的回调函数的名称
var cbName = info.query.callback;
// 手动拼接要返回给客户端的数据对象
var data = {
name: 'zs',
age: 22,
gender: '男',
hobby: ['吃饭', '睡觉', '运动']
}
// 拼接出一个方法的调用,在调用这个方法的时候,把要发送给客户端的数据,序列化为字符串,作为参数传递给这个调用的方法:
var result = `${cbName}(${JSON.stringify(data)})`;
// 将拼接好的方法的调用,返回给客户端去解析执行
res.end(result);
} else {
res.end('404');
}
});
server.listen(3000, () => {
console.log('server running at http://127.0.0.1:3000');
});
- vue-resource 的配置步骤:
- 直接在页面中,通过
script
标签,引入vue-resource
的脚本文件; - 注意:引用的先后顺序是:先引用
Vue
的脚本文件,再引用vue-resource
的脚本文件;
- 发送get请求:
getInfo() { // get 方式获取数据
this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
console.log(res.body);
})
}
- 发送post请求:
postInfo() {
var url = 'http://127.0.0.1:8899/api/post';
// post 方法接收三个参数:
// 参数1: 要请求的URL地址
// 参数2: 要发送的数据对象
// 参数3: 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
console.log(res.body);
});
}
- 发送JSONP请求获取数据:
jsonpInfo() { // JSONP形式从服务器获取数据
var url = 'http://127.0.0.1:8899/api/jsonp';
this.$http.jsonp(url).then(res => {
console.log(res.body);
});
}
vue--vue-resource实现 get, post, 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学习笔记【16】——vue-resource 实现 get, post, jsonp请求
除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求 之前的学习中,如何发起数据请求?原生.jQuery,需要操作DOM 常见的数据请求类型? get post ...
- vue 使用 jsonp 请求数据
vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...
- Vue系列之 => 通过vue-resource发起ajax请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue-resoure 实现get post jsonp请求
1.之前学习中,如何发起数据请求? 2.常见的数据请求类型?get post jsonp 3.常见的URL请求资源地址 get请求地址: http://vue.studyit.io/api/getl ...
- 黑马vue---33、vue-resource 实现 get, post, jsonp请求
黑马vue---33.vue-resource 实现 get, post, jsonp请求 一.总结 一句话总结: vue-resource使用非常非常非常简单:this.$http.get('htt ...
- 第四章 生命周期函数--35 vue-resource发起get、post、jsonp请求
vue-resource 官网 https://github.com/pagekit/vue-resource <!DOCTYPE html> <html lang="en ...
- Javascript - Vue - vue对象
vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...
随机推荐
- Spark配置详解
Spark提供三个位置用来配置系统: Spark属性:控制大部分的应用程序参数,可以用SparkConf对象或者Java系统属性设置 环境变量:可以通过每个节点的 conf/spark-env.sh脚 ...
- JMS 重点是JMS消息结构讲解
这部分之前认识的不是很清楚,转载记录下,转载自:https://www.cnblogs.com/Zender/p/9098410.html 阅读目录 一,消息服务 二,JMS 回到目录 小时(1000 ...
- cookie生命周期expires 时间过期,但是cookie没有被浏览器清理的问题
cookie生命周期expires 时间过期,但是cookie没有被浏览器清理的问题 今天用nodejs起了一个web服务,使用art-template模板引擎渲染出来的页面,在这里我设置了一个coo ...
- AcWing:173. 矩阵距离(bfs)
给定一个N行M列的01矩阵A,A[i][j] 与 A[k][l] 之间的曼哈顿距离定义为: dist(A[i][j],A[k][l])=|i−k|+|j−l|dist(A[i][j],A[k][l]) ...
- SSRF和XSS-filter_var(), preg_match() 和 parse_url()绕过学习
0x01:url标准的灵活性导致绕过filter_var与parse_url进行ssrf filter_var() (PHP 5 >= 5.2.0, PHP 7) filter_var — 使用 ...
- 石川es6课程---5、函数-参数
石川es6课程---5.函数-参数 一.总结 一句话总结: ` 收集参数:收集剩余的参数,必须当到最后一个参数位置:function show(a, b, ...args) { ` 展开参数:展开数组 ...
- TensorFlow 学习(3)——MNIST机器学习入门
通过对MNIST的学习,对TensorFlow和机器学习快速上手. MNIST:手写数字识别数据集 MNIST数据集 60000行的训练数据集 和 10000行测试集 每张图片是一个28*28的像素图 ...
- 从phpMyAdmin批量导入Excel内容到MySQL(亲测非常简洁有效)
今天做项目遇到需要用phpMyAdmin批量导入Excel内容到MySQL数据库.分析了我的踏坑经历并且总结一最便捷的一套导入数据的方法,非常实用简洁: 1.修改Excel表的数据,使得Excel中的 ...
- [SQL]学习中遇到的错误
1.中英文模式切换 查找语句中不能出现中文字符!!!
- zabbix客户端监控
1.安装zabbix客户端软件: yum install -y zabbix20-agent2.修改配置文件vim /etc/zabbix_agentd.conf修改如下: (1)更改Server,S ...