VUE中使用Vue-resource完成交互

前端之家收集整理的这篇文章主要介绍了VUE中使用Vue-resource完成交互前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下

使用vue-resource

引入vue-resource

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

基本语法

// 在一个Vue实例内使用$http
this.$http.get('/someUrl',errorCallback);
this.$http.post('/someUrl',errorCallback);

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

options对象

实例:

GET请求

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

get方法

错误回调 });

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

PHP;">

HTML代码

Box" style="margin-top:100px"> + =
Box",data:{ a:"",b:"" },methods:{ add:function(){ this.$http.get("get.PHP",{ "a":this.a,"b":this.b }).then(function(response){ alert(response.data) },function(response){ alert(response.status) } ) } } })

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

POST请求

PHP;">
Box",data:{ a:"",b:"" },methods:{ add:function(){ this.$http.post("post.PHP",{ "a":this.a,"b":this.b },{ emulateJSON:true //POST请求需要将emulateJSON设置为true }).then(function(response){ alert(response.data) },function(response){ alert(response.status) } ) } } })

JSONP

jsonp的语法跟get,post差不多,只是传递的数据不一样。接下来,我们用jsonp来完成一个百度搜索功能

1.首先准备一个实例的接口,这个接口是百度搜索接口(我们可以自己找一些接口作为测试),如下:

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show

2.准备布局

Box" style="margin-top:100px"> @H_301_90@
  • 22222

暂无数据...

3.功能描述

当我们在搜索框中输入搜索内容的时候,下面的列表会显示出根据我们输入的内容联想的词语。按键盘的上下键,可以上下选择列表中的词语,按enter键的时候,会执行搜索

4.代码实现

首先我们准备一个myData数组,存放联想的词语。t1是input框输入的值,如下

搜索框中的输入内容的时候,执行一个方法,这个方法主要用于发送一个请求,获取输入内容的联想词语。

搜索内容" v-model="t1" @keyup="search()"/>

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

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

Box" style="margin-top:100px">
  • 方法*/ changeDown:function(){ this.now++; if(this.now==this.myData.length){ this.now=-1; } this.t1=this.myData[this.now]; },changeup:function(){ this.now--; if(this.now==-2){ this.now=this.myData.length-1; } this.t1=this.myData[this.now]; }

    完整代码

    <Meta charset="UTF-8"> 初识vue