发表于： 2020-05-28 22:49:47
1 1953
今日完成
在Vue中如何发起ajax(数据)请求
用第三方包,如:vue-resource(Vue高度集成的一个第三方包,能够很方便的发送数据请求)
ps:除了vue-resource 之外，还可以使用、axios' 的第三方包实现实现数据的请求;
以vue-resource为主,第三方包需要事先下载,依托于Vue,所以在Vue的后面导入第三方包(导包)
描述:相当于在Vue上面挂载了一个属性,叫做 this.$http的这么一个属性;
通过它可以点出一些方法,如:this.$http.get/post/jsonp都是可以的
(this指Vue实例)
常见的数据请求类型? get post jsonp
vue-resource实现get, post, jsonp请求
JSONP的实现原理
。由于浏览器的安全性限制,不允许AJAX访问协议不同、域名不同、端口号不同的数据接口,浏
览器认为这种访问不安全;
。可以通过动态创建script标签的形式,把script标签的src属性,指向数据接口的地址,因为script
标签不存在跨域限制,这种数据获取方式,称作JSONP (注意:根据JSONP的实现原理,知晓，
JSONP只支持Get请求) ;
。具体实现过程:
■先在客户端定义一个回调方法,预定义对数据的操作;
■再把这个回调方法的名称,通过URL传参的形式,提交到服务器的数据接口;
■
服务器数据接口组织好要发送给客户端的数据,再拿着客户端传递过来的回调方法名称,
拼接出一个调用这个方法的字符串,发送给客户端去解析执行;
■客户端拿到服务器返回的字符串之后,当作Script脚本去解析执行,这样就能够拿到
JSONP的数据了;
ex:如何用vue-resource请求下面三个测试地址
测试的URL请求资源地址:
+ get请求地址: http://vue. studyit. i0/ap1/ getlunbo
+ post请求地址: http://vue. studyit.1o/api/post
+ jsonp请求地址: http://vue .studyz .10/ api/jsonp
描述:
get和jsonp相似,post是另一种格式
官网出bug了图片加载不了
返回列表
评论