Vue2学习笔记之请求数据交互vue-resource


Posted in Javascript onFebruary 23, 2017

基本语法

必须引入一个库:vue-resource github地址

// 基于全局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);

 vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:

  • get(url, [options])
  • head(url, [options])
  • delete(url, [options])
  • jsonp(url, [options])
  • post(url, [body], [options])
  • put(url, [body], [options])
  • patch(url, [body], [options])

Options

Parameter Type Description
url string 请求的UR
body Object, FormData, string request body
headers Object request header
params Object 请求的URL参数对象
method string 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credentials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送,并设置请求头的X-HTTP-Method-Override
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

1. 向文本发出get请求

准备一个1.txt 的文本数据,时面的内容是:welcomet to vue!!!

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="http://unpkg.com/vue/dist/vue.js"></script>
 <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{
     msg:'Hello World!',
    },
    methods:{
     get:function(){
      //发送get请求
      this.$http.get('1.txt').then(function(res){
       alert(res.body); 
      },function(){
       alert('请求失败处理'); //失败处理
      });
     }
    }
   });
  }
 </script>
</head>
<body> 
 <div id="box">
  <input type="button" @click="get()" value="按钮">
 </div>
</body>
</html>

上面代码实现了,点击按钮,就发送get请求,成功就会执行弹窗 welcomet to vue!!!

2. 关于向后端请求,并带参数的写法

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="http://unpkg.com/vue/dist/vue.js"></script>
 <script src="http://files.cnblogs.com/files/zycbloger/vue-resource.min.js"></script>
 <script type="text/javascript">
  window.onload = function(){
   var vm = new Vue({
    el:'#box',
    data:{
     msg:'Hello World!',
    },
    methods:{
     get:function(){
      //发送get请求
      this.$http.get('get.do',{a:1,b:2}).then(function(res){
       alert(res.body); 
      },function(){
       alert('请求失败处理'); //失败处理
      });
     },

     post:function(){
      //发送post请求
      this.$http.post('post.do',{a:1,b:2}).then(function(res){
       alert(res.body); 
      },function(){
       alert('请求失败处理'); //失败处理
      });
     }
    }
   });
  }
 </script>
</head>
<body> 
 <div id="box">
  <input type="button" @click="get()" value="按钮get">
  <input type="button" @click="post()" value="按钮post">
 </div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 #Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 #Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 #Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
PHP操作Memcache实例介绍
2013/06/14 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
python3 shelve模块的详解
2017/07/08 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python3实现名片管理系统
2020/11/29 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python Celery多队列配置代码实例
2019/11/22 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python实现括号匹配方法详解
2020/02/10 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
暑期社会实践感言
2014/02/25 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
云台山导游词
2015/02/03 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
预备党员入党感言
2015/08/01 职场文书
竞聘书的秘诀
2019/04/02 职场文书