JQ实现简单的Ajax请求封装

封装的意义在于复用,在于减少重复的代码。

我在项目中做了简单的Ajax请求封装,实现方式如下:

 1 //封装Ajax请求
 2 $.extend({
 3     ajaxDirect:function(url,type,data,success,error){
 4         if(type.toLowerCase()=='post'){
 5             data = pack(data)
 6         }
 7         $.ajax({
 8             type: type,
 9             url: base + url,
10             contentType:'application/json',
11             data:data,
12             beforeSend: function (XMLHttpRequest) {
13                 XMLHttpRequest.setRequestHeader("X-Token", localStorage.token)
14             },
15             success: function(data){
16                 success(data)
17             },
18             error: function(data){
19                 error(data)
20             },
21             dataType: "json"
22         })
23     }
24 })

其中的要点为:

1.使用jQ的$.extend函数,则调用时只需用$.ajaxDirect(url,type,data,function(){},function(){})即可,若data无值,则传空对象过来。

2.pack为JSON.stringify的封装,即

1 //封装解封
2 function pack(data) {
3     return JSON.stringify(data)
4 }
5 
6 function unpack(data) {
7     return JSON.parse(data)
8 }

3.该项目在请求时需要传token,则我在请求时在请求头部统一加上了token,即

1 beforeSend: function (XMLHttpRequest) {
2       XMLHttpRequest.setRequestHeader("X-Token", localStorage.token)
3 }

4.base为请求的统一前缀,为公共变量,可自定义值。

猜你喜欢

转载自www.cnblogs.com/luoyihao/p/11954330.html