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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
详解Vue之事件处理
Jul 10 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python字典序问题实例
2014/09/26 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python获得一个月有多少天的方法
2015/06/04 Python
Python iter()函数用法实例分析
2018/03/17 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
解决Python安装cryptography报错问题
2020/09/03 Python
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
几个常见的软件测试问题
2016/09/07 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
个人求职自荐信范文
2014/06/20 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
php TP5框架生成二维码链接
2021/04/01 PHP
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python