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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
ztree实现权限横向显示功能
May 20 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 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伪静态页面函数附使用方法
2008/06/20 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
js瀑布流布局的实现
2020/06/28 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python制作爬虫采集小说
2015/10/25 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
python中 logging的使用详解
2017/10/25 Python
Python中GIL的使用详解
2018/10/03 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python 实现多维数组(array)排序
2020/02/28 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
项目工作说明书
2014/07/29 职场文书
2014年节能降耗工作总结
2014/12/11 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
生日赠语
2015/06/23 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers