vue-ajax小封装
2018-02-28 18:42
260 查看
vue-ajax小封装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示例:
3. 需要获取的数据(1.json)
4. 结果
5. 链接地址 ( https://github.com/hsiangleev/vue-ajax )
转载:https://www.cnblogs.com/hsianglee/p/7536099.html
/** 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 )
转载:https://www.cnblogs.com/hsianglee/p/7536099.html
相关文章推荐
- vue+axios方法封装(restful,ajax)
- 关于apicloud开发中对vue和ajax方法的封装
- vue-ajax小封装实例
- vue 使用自己封装的原生 ajax
- Vue.js插件axios——封装一个可以灵活使用的ajax
- vue 组件的封装之基于axios的ajax请求方法
- 对ajax的js 封装
- Ajax上传控件封装,支持图片简介、支持图片前台压缩2
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- 基于iframe的图片无刷新上传和用ajax生成缩略图和即时删除,封装于thinkphp
- 一个AJAX自动完成功能的js封装源码[支持中文]第1/2页
- 希望找人一起写个 Ajax 的封装
- Vue封装一个简单轻量的上传文件组件的示例
- 干货:vue2.x select2 指令封装
- fetch下一代ajax请求数据的封装
- ajax简单的封装一下
- ssh2(struts2+spring2.5+hibernate3.3+ajax)带进度条文件上传(封装成标签)
- 针对prototype中封装的几个Ajax对象做的用例
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- 自己写的封装好的简单的AJAX--javascript