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小封装
原文地址：http://www.cnblogs.com/hsianglee/p/7536099.html