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 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
vue之nextTick全面解析
May 17 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php实现Mysql简易操作类
2015/10/11 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
google地图的路线实现代码
2009/08/20 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
关于vue面试题汇总
2018/03/20 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
python实现发送邮件及附件功能
2021/03/02 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
3种python调用其他脚本的方法
2020/01/06 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
大学新学期计划书
2014/04/28 职场文书
干部鉴定材料
2014/05/18 职场文书
贫困证明怎么写
2015/06/16 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers