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. java语言基础（变量和运算符）
			
    java八大基本数据类型: 整型{   int(整型)    short(短整型)   long(长整型)} 浮点型{ float(浮点型)   double(双精度)} 布尔{boolean}    ...
    
			
    2. 
						
  2. 利用wireshark任意获取qq好友IP实施精准定位
			
    没事玩一把,感觉还挺有趣,首先打开wireshark: 不管你连接的什么网,如图我连接的是WLAN,双击进入如图界面: ctrl-f进行搜索:如图 选择分组详情,字符串,并输入020048.这时候你就 ...
    
			
    3. 
						
  3. java多线程知识点概述
			
    这里只起一个概述的作用,极其简单的列一下知识点,需要在脑海中过一下,如果哪些方面不熟悉的话,建议利用网络资源去学习. 1.线程.进程概念 概念 线程状态及其转换 2.死锁.预防.解决 3.jdk线程实 ...
    
			
    4. 
						
  4. Grails笔记一：windows8.1操作系统cmd下grails命令无效
			
    最近决定使用intellij idea工具来开发基于Grails框架的应用程序,,在安装好jdk 1.7以及配置好jdk和grails环境变量后进行grails测试,在win8.1的命令行窗口中输入以 ...
    
			
    5. 
						
  5. 关系型数据库和NOSQL数据库对比
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt328 关系型数据库,是建立在关系模型基础上的数据库,其借助于集合代数等数学概 ...
    
			
    6. 
						
  6. CDN架构以及原理分析
			
    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp61  在不同地域的用户访问网站的响应速度存在差异,为了提高用户访问的响应 ...
    
			
    7. 
						
  7. 使用vs2015编写c语言程序
			
    使用vs2015编写c语言程序 转载Yanky--博客园 http://www.cnblogs.com/yankyblogs/p/7058036.html   编写c语言程序的软件有很多,当年刚开始学 ...
    
			
    8. 
						
  8. Java学习记录：降低耦合度
			
    耦合度定义 耦合度(Coupling)是对模块间关联程度的度量.耦合的强弱取决与模块间接口的复杂性.调用模块的方式以及通过界面传送数据的多少. 模块间的耦合度是指模块之间的依赖关系,包括控制关系.调用 ...
    
			
    9. 
						
  9. 201521123107 《Java程序设计》第9周学习总结
			
    第9周作业-异常 1.本周学习总结 2.书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什 ...
    
			
    10. 
						
  10. java中null的类型匹配
			
    null作为一个特殊的参数匹配为String对象
    
			
    11.