VUE中使用Vue-resource完成交互

时间：2021-05-26

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

使用vue-resource

引入vue-resource

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

<script src='js/vue.js'></script><script src='js/vue-resource.js'></script>

基本语法

// 基于全局Vue对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);// 在一个Vue实例内使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, errorCallback);this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

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

options对象

实例：

GET请求

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

get方法：

this.$http.get('/someUrl', [options]).then(function(response){ // 响应成功回调}, function(response){ // 响应错误回调});

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

<?php $a=$_GET['a']; $b=$_GET['b']; echo $a+$b;?>

html代码：

<div class="container" id="box" style="margin-top:100px"> <input type="text" name="" id="" v-model="a" />+ <input type="text" name="" id="" v-model="b" /> = <input type="button" value="求和" class="btn btn-info" @click="add()"/></div><script type="text/javascript"> new Vue({ el:"#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) } ) } } })</script>

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

POST请求

<?php $a=$_POST['a']; $b=$_POST['b']; echo $a+$b;?> new Vue({ el:"#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.准备布局

<div class="container" id="box" style="margin-top:100px"> <input type="text" placeholder="请输入搜索内容" /> <ul> <li >22222</li> </ul> <p >暂无数据...</p> </div>

3.功能描述

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

4.代码实现

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

<input type="text" placeholder="请输入搜索内容" v-model="t1" />data:{ myData:[], t1:""}

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

<input type="text" placeholder="请输入搜索内容" v-model="t1" @keyup="search()"/> methods:{ search:function(ev){this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{ "wd":this.t1 },{ jsonp:"cb" //callback名字，默认是callback }).then(function(response){ this.myData=response.data.s },function(response){ alert(response.status) } )　　　　　　　　　　} }

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

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

<div class="container" id="box" style="margin-top:100px"> <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/> <ul> <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> data:{ myData:[], t1:"", now:-1 } 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]; }

完整代码：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>初识vue</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" /> <style type="text/css"> .gray{ background-color: gray; } </style> </head> <body> <div class="container" id="box" style="margin-top:100px"> <input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/> <ul> <li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li> </ul> <p v-show="myData.length==0">暂无数据...</p> </div> </body> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // new Vue({ el:"#box", data:{ myData:[], t1:"", now:-1 }, methods:{ search:function(ev){ if(ev.keyCode==38 || ev.keyCode==40)return; if(ev.keyCode==13){ window.open('https:///5a1Fazu8AA54nxGko9WTAnF6hhy/su",{ "wd":this.t1 },{ jsonp:"cb" //callback名字，默认是callback }).then(function(response){ this.myData=response.data.s },function(response){ alert(response.status) } ) }, 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]; } } }) </script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章