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. jsp的C标签一般使用方法以及js接收servlet中的对象及对象数字
			
    jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组 由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大 ...
    
			
    2. 
						
  2. anaconda安装加速镜像问题解决
			
    Anaconda使用conda连接网络出现错误 我使用的是windows10 64bit下的Anaconda2,在安装和更新包的时候出现以下报错信息. 这是使用默认源安装包的报错信息: C:Users ...
    
			
    3. 
						
  3. SQL优化工具
			
    SQL优化工具 什么是索引? 打个比方,我们在使用MySQL用作查询的时候就好比查字典,索引就好比字典的偏旁部首页.如果没有索引我们查询一个文字就需要一页页的翻,显然这种方式效率很低.如果我们对某一字 ...
    
			
    4. 
						
  4. MongoDB学习之——安装
			
    MongoDB安装 说明: 本次安装教程: 版本:mongoDB-3.2.4 安装环境:windows 10 ,64位操作系统 准备:安装包.Robomongo(客户端用于查看mongoDB里面的数据 ...
    
			
    5. 
						
  5. python常用标准库
			
    -------------------系统内建函数------------------- 1.字符串     str='这是一个字符串数据测试数据'对应     str[0]:获取str字符串中下标为 ...
    
			
    6. 
						
  6. mysql：Linux系统下mysql5.6的安装卸载
			
    1.1. 下载rpm包 要使用yum 安装mysql,需要mysql的yum仓库,先从官网下载适合你系统的仓库 http://dev.mysql.com/downloads/repo/yum/ 我的是 ...
    
			
    7. 
						
  7. 【Java IO流】字节流和字符流详解
			
    字节流和字符流 对于文件必然有读和写的操作,读和写就对应了输入和输出流,流又分成字节和字符流. 1.从对文件的操作来讲,有读和写的操作——也就是输入和输出. 2.从流的流向来讲,有输入和输出之分. 3 ...
    
			
    8. 
						
  8. iBatis的一个问题
			
    写了一段查询语句,条件中有一条alarmtype<>'1004'这样的条件,原来是这样写的 <![CATA[ and alarmtype<>'1004']]> 然后 ...
    
			
    9. 
						
  9. mysql 5.7 Warning: Using a password on the command line interface can be insecure. 解决方案
			
    百度了好多,发现都是lunix环境下的,没有找到windows和OS 的,在lunix环境下的解决方案一般就是修改数据库配置文件 my.conf 在Windows 中是没有my.cnf 文件,而是叫做 ...
    
			
    10. 
						
  10. 201521123096《Java程序设计》第六周学习总结
			
    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 (1)clone方法 1.1 Object ...
    
			
    11.