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. 结果




5. 链接地址 ( https://github.com/hsiangleev/vue-ajax )
												


											
vue-ajax小封装的更多相关文章
	

    
						
  1. vue + ajax + php 接口的使用小接
		
    vue + ajax + php 接口的使用小接 前端代码: (获取用户信息,并渲染页面) userinfor.html <!DOCTYPE html> <html lang=&qu ...
    
		
    2. 
						
  2. 原生态AJAX详解和jquery对AJAX的封装
		
    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
    
		
    3. 
								
  3. 原生ajax与封装的ajax使用方法
		
    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
    
		
    4. 
						
  4. vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全
		
    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
    
		
    5. 
						
  5. Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用
		
    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
    
		
    6. 
						
  6. vue2.0 如何自定义组件（vue组件的封装）
		
    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
    
		
    7. 
						
  7. Vue之小入门
		
    Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...
    
		
    8. 
						
  8. Vue+ajax的使用小结
		
    js var vue = new Vue({ el:"#vueid", data:{ selectById : "", }, methods:{ yourMet ...
    
		
    9. 
						
  9. 【前端学习笔记04】JavaScript数据通信Ajax方法封装
		
    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Amazon Aurora解读(SIGMOD 2017)
			
    Amazon在SIGMOD 2017发表了论文<Amazon Aurora: DesignConsiderations for High Throughput Cloud-Native Rela ...
    
			
    2. 
						
  2. 简述C/C++调用lua中实现的自定义函数
			
    1.首先说下目的,为什么要这么做 ? 正式项目中,希望主程序尽量不做修改,于是使用C/C++完成功能的主干(即不需要经常变动的部分)用lua这类轻量级的解释性语言实现一些存在不确定性的功能逻辑:所以, ...
    
			
    3. 
						
  3. 安装lvs过程
			
    linux我是最小化安装的mini,安装完成后搭建本地yum,首先安装Development Tools开发工具组 1)在各服务器上修改主机名: [root@LVS1 ~]# hostname LVS ...
    
			
    4. 
						
  4. C++与类型转换相关的四个关键字及其特点
			
    1.reinterpret_cast (expression) type-id 必须是一个指针.引用.算术类型.函数指针或者成员指针. 它可以把一个指针转换成一个整数,也可以把一个整数转换成一个指针( ...
    
			
    5. 
						
  5. Mysql分区表使用的一些限制和需要注意的地方
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt347 mysql分区策略都基于两个非常重要的假设:查询都能够过滤(prunn ...
    
			
    6. 
						
  6. Unity3d&C#分布式游戏服务器ET框架介绍-组件式设计
			
    前几天写了<开源分享 Unity3d客户端与C#分布式服务端游戏框架>,受到很多人关注,QQ群几天就加了80多个人.开源这个框架的主要目的也是分享自己设计ET的一些想法,所以我准备写一系列 ...
    
			
    7. 
						
  7. windows系统，优化C盘空间的方法
			
    C盘在使用过程中,内容会越来越多,剩余空间越来越小.如何清理出更多空间呢?以windows7为例 转载请保留 http://www.cnblogs.com/lion-zheng/ cleanmgr w ...
    
			
    8. 
						
  8. 201521123109《java程序设计》第四周学习总结
			
    1. 本周学习总结 #1.1 尝试使用思维导图总结有关继承的知识点. #1.2 使用常规方法总结其他上课内容. - 了解了有关类的继承的知识 - 了解继承和多态的关系以及一些关键字内容 -  学习了O ...
    
			
    9. 
						
  9. 201521123089 《Java程序设计》第1周学习总结
			
    1. 本周学习总结 学习了java的发展史以及JDK,JVM,JRE; 2. 书面作业 1.为什么java程序可以跨平台运行?执行java程序的步骤是什么? java有JVM,实在虚拟机上运行的. 2 ...
    
			
    10. 
						
  10. #黑客社会工程学攻防演练#［Chapter 1］
			
    1.1 什么是社会工程学 社会工程学(Social Engineering)是关于建立理论通过自然的.社会的和制度上的途径并特别强调根据现实的双向计划和设计经验来一步一步地解决各种社会问题.社会工程学 ...
    
			
    11.