vue-ajax小封装实例


Posted in Javascript onSeptember 18, 2017

1. js 文件:

/*
* ajax封装:
* 1. 引入文件
* 2. new Vue().ajax.get(url,data,fn,ojson), 或 new Vue().ajax.post(url,data,fn,ojson)
* url: 需要获取数据的文件地址 (string)
* data: 需要发送的信息 (可省略) (obj)
* fn: 获取信息后的回调函数,接收到的返回值为data (function)
* ojson: 是否需要转换为json格式 (可省略) (设置为 "json")
*
* 3. new Vue().ajax.get().cancel(): 取消异步请求
* 4. new Vue().ajax.json(str): 可转化json格式字符串
**/
Vue.prototype.ajax={
 //添加url传送信息
 addUrl: function (url,obj){
  //如果省略url,则为post请求,令obj为url,令url为null
  if(arguments.length==1){
   obj=url;
   url=null;
  }
  //url不为空(get请求: 设置url信息)
  if(!!url){
   for(var k in obj){
    url += (url.indexOf("?")==-1 ? "?" : "&");
    url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);
   }
  }else{
   //post请求(设置data信息)
   url="";
   for(var k in obj){
    url+=encodeURIComponent(k)+ "=" +encodeURIComponent(obj[k]);
    url+="&";
   }
   //删除最后一个&
   var arr=url.split("");
   arr.pop();
   url=arr.join("");
  }
  //返回拼接好的信息
  return url;
 },
 get: function (url,data,fn,ojson){
  this.xhr=new XMLHttpRequest();
  //省略data时,即不发送数据
  if(typeof data =="function"){
   ojson=fn;
   fn=data;
   data={};
  }
  //合并url和data信息
  url=this.addUrl(url,data)
  //是否异步发送
  this.xhr.open("get",url,true);
  this.xhr.send(null);
  //当请求完成之后调用回调函数返回数据
  this.success(fn,ojson);
  //链式编程
  return this;
 },
 post: function (url,data,fn,ojson){
  this.xhr=new XMLHttpRequest();
  //省略data时,即不发送数据
  if(typeof data =="function"){
   ojson=fn;
   fn=data;
   data={};
  }
  //合并data信息
  data=this.addUrl(data);
  //是否异步发送
  this.xhr.open("post",url,true);
  this.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  this.xhr.send(data);

  //当请求完成之后调用回调函数返回数据
  this.success(fn,ojson);
  //链式编程
  return this;
 },
 //字符串转换json
 json: function (str){
  return (new Function("return " + str))(); 
 },
 success: function (fn,ojson){
  //当请求完成之后调用回调函数返回数据
  var self=this;
  this.xhr.onreadystatechange=function (){
   var odata;
   if(self.xhr.readyState == 4){
    if((self.xhr.status>=200 && self.xhr.status<300) || self.xhr.status == 304){
     odata=self.xhr.responseText;
     //若为json则转化json格式
     if(ojson==="json"){
      odata=self.json(odata);
     }
     fn(odata);
    }else{
     odata="request was unsuccessful: "+self.xhr.status;
     fn(odata);
    }
   }
  }
 },
 //取消异步请求
 cancel: function (){
  this.xhr.abort();
  return this;
 }
}

2. html示例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div id="app">
  <button @click="getInfo">点击获取信息</button>
  <span>{{ msg }}</span>
 </div>

 <script src="vue.js"></script>
 <script src="vue-ajax.js"></script>
 <script>
  var vm=new Vue({
   el: "#app",
   data: {
    msg: "",
   },
   methods: {
    getInfo: function (){
     var self=this;
     this.ajax.get("1.json",{
      tel: 123456,
      address: "池州市"
     },function (data){
      self.msg=data[1].name
     },"json");
    }
   }
  })
 </script>
</body>
</html>

3. 需要获取的数据(1.json)

[
 {
  "name": "张三",
  "age": 18,
  "sex": "man"
 },
 {
  "name": "李四",
  "age": 20,
  "sex": "woman"
 },
 {
  "name": "王五",
  "age": 22,
  "sex": "man"
 }
]

4. 结果

vue-ajax小封装实例vue-ajax小封装实例

以上这篇vue-ajax小封装实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
信息滚动效果的实例讲解
Sep 18 #Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 #Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
php学习笔记 数组的常用函数
2011/06/13 PHP
php explode函数实例代码
2012/02/27 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python单例模式实例解析
2018/08/28 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python3实现单目标粒子群算法
2019/11/14 Python
三个python爬虫项目实例代码
2019/12/28 Python
用python发送微信消息
2020/12/21 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
实体的生命周期
2013/08/31 面试题
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
投标担保书范文
2014/04/02 职场文书
委托书的写法
2014/08/30 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL