VUE中使用Vue-resource完成交互

本文介绍了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对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);


// 在一个Vue实例内使用$http
this.$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数据*/
      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://www.baidu.com/s?wd='+this.t1);
          this.t1='';
        }          
          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)
          }
          )
        },
        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>

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

# vue  # resource  # 交互  # jsonp  # Vue-resource  # 详解vue前后台数据交互vue-resource文档  # 详解vue与后端数据交互(ajax)：vue-resource  # Vue2学习笔记之请求数据交互vue-resource  # 详解vue-Resource（与后端数据交互）  # 暂无  # 回调  # 请输入  # 如下图  # 就像  # 第一个  # 列表中  # 我们可以  # 第二个  # 给大家  # 做一个  # 可以实现  # 当我们  # 设置为  # 主要用于  # 方法来  # 来完成  # 该文件  # 框中  # 大家多多 

相关文章： 如何在Windows虚拟主机上快速搭建网站？  建站主机无法访问？如何排查域名与服务器问题  h5在线制作网站电脑版下载,h5网页制作软件？  小米网站链接制作教程,请问miui新增网页链接调用服务有什么用啊？  如何做网站制作流程,*游戏网站怎么搭建？  建站之星手机一键生成：多端自适应+小程序开发快速建站指南  如何使用Golang table-driven基准测试_多组数据测量函数效率  活动邀请函制作网站有哪些,活动邀请函文案？  html制作网站的步骤有哪些,iapp如何添加网页？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  昆明网站制作哪家好,昆明公租房申请网上登录入口？  如何快速查询网址的建站时间与历史轨迹？  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  如何撰写建站申请书？关键要点有哪些？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何在Windows服务器上快速搭建网站？  网站制作模板下载什么软件,ppt模板免费下载网站？  如何高效生成建站之星成品网站源码？  如何快速辨别茅台真假？关键步骤解析  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  如何通过主机屋免费建站教程十分钟搭建网站？  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  如何用VPS主机快速搭建个人网站？  简历在线制作网站免费版,如何创建个人简历？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  建站之星备案是否影响网站上线时间？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  ,sp开头的版面叫什么？  如何用花生壳三步快速搭建专属网站？  太平洋网站制作公司,网络用语太平洋是什么意思？  建站之星安装模板失败：服务器环境不兼容？  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么？  建站三合一如何选？哪家性价比更高？  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  公众号网站制作网页,微信公众号怎么制作？  济南专业网站制作公司,济南信息工程学校怎么样？  建站主机默认首页配置指南：核心功能与访问路径优化  如何彻底删除建站之星生成的Banner？  专业网站制作服务公司,有哪些网站可以免费发布招聘信息？  建站之星代理如何获取技术支持？  如何通过虚拟主机空间快速建站？  如何设计高效校园网站？  济南网站制作的价格,历城一职专官方网站？  宝塔Windows建站如何避免显示默认IIS页面？  如何用已有域名快速搭建网站？  建站之星展会模板：智能建站与自助搭建高效解决方案