从零开始学 Web之Vue.js(四)Vue的Ajax请求和跨域

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新……

github:https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN:https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

一、Vue发送Ajax请求

之前我们发送Ajax请求的方式,一是原生的方式发送,二是通过jQuery来发送Ajax请求。

但是我们知道,在Vue里面是不推荐使用jQuery的,那么如何使用Vue来发送Ajax请求呢?

在Vue中可以使用第三方插件 来实现Ajax请求的发送

1、vue-resource 安装

1、通过npm的方式在线安装:

2、在 github 中下载 vue-resource 的 文件 (在 dist 文件夹下有个 vue-resource.js 文件。)

3、使用 CDN。

2、vue-resource 使用

参考链接:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

步骤:

1、在Vue.js之后引入vue-resource.js文件(因为vue-resource.js文件是依赖于Vue的)

2、全局使用:

then后面第一个参数是请求成功的回调函数;第二个参数是请求失败的回调函数。

获取到的结果在回调函数的参数中

3、局部使用:在methods的事件中,使用 的形式发起请求。

示例:通过三个按钮点击分别获取get,post,jsonp请求。

注意:获取到的数据在成功回调函数参数data的中,data是个对象,具体需要的数据是 data.body。

二、vue-resource 跨域请求数据

1、jsonp的实现原理

jsonp主要是为了解决跨域请求问题的。

我们知道,由于浏览器的安全性限制,不允许AJAX访问协议不同域名不同端口号不同的数据接口,浏览器认为这种访问不安全。

但是,script标签src属性中的链接却可以访问跨域的js脚本,于是利用这种特性,我们让服务器不再返回数据,而是返回一段调用某个函数的js代码,然后在script中进行调用,就实现了跨域。

于是,结果就弹出对话框。

我们再改进一下,在script的src中传入的大多是后台文件,这里以php文件为例。

由于我们之前传入 js 文件只是想得到一个函数的调用而已,那么传入php文件怎么获取函数的调用呢?

这里动态的添加了一个script标签,src指向跨域的一个php脚本,并且将上面的js函数名作为callback参数传入,那么我们看下PHP代码怎么写的:

php代码返回的也是一个函数调用,我们需要的数据,就在其参数里面。成功弹出提示框:

最后,jQuery提供了方便使用jsonp的方式:

其中参数 data,即为php代码返回的函数调用的参数,就是我们先要的数据。

2、跨域获取电影信息

这里我使用聚合数据:https://www.juhe.cn 的免费API。

使用方式很简单,注册之后,申请数据后,在个人中心->我的数据,接口名称上方查看key值。

而我们访问的url即为:

我们在name输入框中输入电影名称后,点击查询按钮即可显示相关信息。

由于API要求我们访问的方式为 get请求,所以我们使用 的方式来获取电影信息。

然后打印获取到的数据result,但是却爆出如下错误信息:

错误信息是表示,无法实现跨域。而我们之前知道 jsonp是可以实现跨域问题的。

于是我将get请求改为jsonp请求: 就可以了。

改进:

之前直接把数据接口放在了请求地址里面,如果地址变了,就要在请求地址里面修改,如果不止一个还有其他post,get请求等,那么就要修改多次,所以我们有必要动态的指定数据接口。

使用: 来指定数据接口的根地址。

我们在请求的时候只需要写 就可以了。

注意:后续地址,不要写 / ,否则就不会将根地址和后续地址进行拼接。

当然,对于我们发给服务器的数据,可能会需要

我们也可以进行全局配置:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180917G080CU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券