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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 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
php.ini中文版
2006/10/09 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
jquery密码强度校验
2015/12/02 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
使用python脚本实现查询火车票工具
2018/07/19 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
合同专员岗位职责
2013/12/18 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
销售顾问工作计划书
2014/08/15 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL