介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> Document
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt;按钮@click=癵etInfo"祝辞点击获取信息& lt;/button>
& lt; span>{{味精}}& lt;/span>
& lt;/div>
& lt;脚本src=皏ue.js"祝辞& lt;/script>
& lt;脚本src=皏ue-ajax.js"祝辞& lt;/script>
& lt; script>
var vm=new Vue ({
埃尔:“# app"
数据:{
味精:““,
},
方法:{
getInfo:函数(){
var自我=;
this.ajax.get (“1. json", {
电话:123456,
地址:“杭州“;
}、功能(数据){
self.msg [1] . name=数据
},“json");
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html> /*
* ajax封装:
* 1。引入文件
* 2。新Vue () .ajax.get (url、数据、fn ojson),或新Vue () .ajax.post (url、数据、fn ojson)
* url:需要获取数据的文件地址(字符串)
*数据:需要发送的信息(可省略)(obj)
* fn:获取信息后的回调函数,接收到的返回值为数据(函数)
* ojson:是否需要转换为json格式(可省略)(设置为“json")
*
* 3。.cancel .ajax.get新Vue()()():取消异步请求
* 4。新的Vue () .ajax.json (str):可转化json格式字符串
* */Vue.prototype.ajax={//添加url传送信息
addUrl:函数(url, obj) {//如果省略url,则为帖子请求,令obj为url,令url为null
如果(arguments.length==1) {
obj=url;
url=零;
}//url不为空(得到请求:设置url信息)
如果(! ! url) {
(var k obj) {
url +=(url.indexOf (“?”)==1 ?“?“:“和“);
url +=encodeURIComponent (k) +“=?+ encodeURIComponent (obj [k]);
}
其他}{//后请求(设置数据信息)
url=?“;
(var k obj) {
url +=encodeURIComponent (k) +“=?+ encodeURIComponent (obj [k]);
url +=昂汀?
}//删除最后一个,
var arr=url.split (“;”);
arr.pop ();
url=arr.join (“;”);
}//返回拼接好的信息
返回的url;
},
得到:函数(url、数据、fn ojson) {
这一点。xhr=new XMLHttpRequest ();//省略数据时,即不发送数据
如果(typeof data=https://www.yisu.com/zixun/=昂?{
ojson=fn;
fn=数据;
数据={};
}//合并url和数据信息
url=this.addUrl (url,数据)//是否异步发送
this.xhr.open(“获得”,url,真的);
this.xhr.send(空);//当请求完成之后调用回调函数返回数据
this.success (fn ojson);//链式编程
返回;
},
职位:函数(url、数据、fn ojson) {
这一点。xhr=new XMLHttpRequest ();//省略数据时,即不发送数据
如果(typeof数据==昂?{
ojson=fn;
fn=数据;
数据={};
}//合并数据信息
data=this.addUrl(数据);//是否异步发送
this.xhr.open(“文章”,url,真的);
this.xhr。setRequestHeader(“内容类型”,“应用程序/x-www-form-urlencoded”);
this.xhr.send(数据);//当请求完成之后调用回调函数返回数据
this.success (fn ojson);//链式编程
返回;
},//字符串转换json
json:函数(str) {
返回(新功能(“回归”+ str)) ();
},
成功:函数(fn ojson) {//当请求完成之后调用回调函数返回数据
var自我=;
this.xhr。onreadystatechange=function () {
var odata;
如果(self.xhr。readyState==4) {
如果(self.xhr。状态>=200 & & self.xhr.status <300) | | self.xhr。状态==304){
odata=self.xhr.responseText;//若为json则转化json格式
如果(ojson===json) {
odata=self.json (odata);
}
fn (odata);
其他}{
odata=扒肭蟛怀晒?“+ self.xhr.status;
fn (odata);
}
}
}
},//取消异步请求
取消:函数(){
this.xhr.abort ();
返回;
}
} (
{
“name":“张三“,
“age": 18,
“sex":“man"
},
{
“name":“李四“,
“age": 20,
“sex":“woman"
},
{
“name":“王五“,
“age": 22日
“sex":“man"
}
)
这篇文章主要介绍Vue如何封装ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强> HTML文件:
<强> JS文件:
<>强后台获取或者前端构造的数据结构:
以上是“Vue如何封装ajax”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
