您的位置首页百科知识

VUE中Vue-resource完成交互

VUE中Vue-resource完成交互

使用vue-resource引入vue-resourcevue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始使用vue之前,需要先引入vue-resource.js这个文件

在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

实例:GET请求在下面的实例中,做一个求和的功能,效果如下图:

get方法:

在该实例中,准备了一个php文件,该文件主要接收前台通过get传过来的参数,并计算两个参数的和,代码如下:

说明:response是后台返回的参数,它包括以下属性:

JSONPjsonp的语法跟get,post差不多,只是传递的数据不一样。接下来,我们用jsonp来完成一个百度搜索的功能。1.首先准备一个实例的接口2.准备布局

3.功能描述在搜索框中输入搜索的内容的时候,下面的列表会显示出根据输入的内容联想的词语。按键盘的上下键,可以上下选择列表中的词语,按enter键的时候,会执行搜索4.代码实现首先准备一个myData数组,存放联想的词语。t1是input框输入的值,如下

执行到这一步,列表中已经可以显示出搜索的联想词语了,如下图:

下面可以实现,按上下键的时候,选择词语