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 相关文章推荐
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
javascript中的事件代理初探
Mar 08 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 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
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】
2018/12/08 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
禁止按回车键提交表单的方法
2015/06/11 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
python 连接sqlite及简单操作
2017/06/30 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
港湾网络笔试题
2014/04/19 面试题
会计专业个人自我鉴定
2014/03/21 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
SQL Server Agent 服务无法启动
2022/04/20 SQL Server