jquery的ajax二次封装

二次封装的目的是按照项目需求直接调用，减少代码冗余。

使用方法：

调用：

1
2
3
4
5
$.ajaxMy().syncPost("/http").done(function (data) {
    if (data.result.num === 200 && data.chstate.length > 0) {
        $("#StreamStatistics").text(data.chstate[0].bps)
    }
})

对应请求函数：

put、get、post、delete、patch 如需使用同步请求，只需在函数前加入sync如syncPost、syncPut。
对应参数为：
  1. 请求的url
  2. 请求的数据
  3. 请求的预期返回参数数据类型（datatype）
  4. 自定义错误的回调设置（error）
  5. 自定义always函数设置
  6. contentType设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
$.extend({
    ajaxMy: function () {
        //根据关键的几个参数统一创建ajax对象
        function create(_url, _method, _data, _async, _dataType, _error, _always, _contentType,
            _processData, _HttpLogin) {
            if (_contentType == "application/json;charset=UTF-8" && typeof (_data)) {
                _data = JSON.stringify(_data)
            }
            return $.ajax({
                url: _url,
                dataType: _dataType,
                async: _async,
                method: _method,
                data: _data,
                contentType: _contentType,
                cache: false,
                timeout: 10000,
                error: _error,
                complete: _always,
                processData: _processData
            });
        }
        var ajax = {}, //声明一个对象一个数组
            methods = [{
                name: 'put',
                method: 'put',
                async: true,
                contentType: "application/json; charset=UTF-8",
                processData: false
            },
            {
                name: 'get',
                method: 'get',
                async: true,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                processData: true
            },
            {
                name: 'post',
                method: 'post',
                async: true,
                contentType: "application/json; charset=UTF-8",
                processData: false
            },
            {
                name: 'delete',
                method: 'delete',
                async: true,
                contentType: "application/json; charset=UTF-8",
                processData: false
            },
            {
                name: 'patch',
                method: 'patch',
                async: true,
                contentType: "application/json; charset=UTF-8",
                processData: false
            },
            {
                name: 'syncGet',
                method: 'get',
                async: false,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                processData: true
            },
            {
                name: 'syncPost',
                method: 'post',
                async: false,
                contentType: "application/json; charset=UTF-8",
                processData: false
            },
            {
                name: 'syncPut',
                method: 'Put',
                async: false,
                contentType: "application/json; charset=UTF-8",
                processData: false
            }, {
                name: 'syncDelete',
                method: 'delete',
                async: false,
                contentType: "application/json; charset=UTF-8",
                processData: false
            },
            {
                name: 'syncPatch',
                method: 'patch',
                async: false,
                contentType: "application/json; charset=UTF-8",
                processData: false
            }
            ];
        for (var i = 0, l = methods.length; i < l; i++) {
            ajax[methods[i].name] = (function (i) {
                return function () {
                    var _url = arguments[0],
                        _data = arguments[1],
                        _dataType = arguments[2],
                        _error = arguments[3] || function (XMLHttpRequest, textStatus,
                            errorThrown) {
                            $.overtime(XMLHttpRequest, textStatus, errorThrown);
                        },
                        _always = arguments[4] || function (XMLHttpRequest, status) {
                            if (status == 'timeout') {
                                alert(LT('error'))
                            }
                        },
                        _contentType = arguments[5] || methods[i].contentType
                    _processData = methods[i].processData;
                    if (_contentType == "application/json; charset=UTF-8") {
                        JSON.stringify(_data);
                    }
                    return create(_url, methods[i].method, _data, methods[i].async,
                        _dataType, _error, _always, _contentType, _processData);
                }
            })(i);
        }
        return ajax;
    },
    overtime: function (XMLHttpRequest, textStatus, errorThrown) {
        var errAlert = function (XMLHttpRequest, errorThrown) {
            if (typeof (XMLHttpRequest) != 'undefined') {
                switch (XMLHttpRequest) {
                    case 200:
                        alert('内容解析错误！');
                        break;
                    case 401:
                        break;
                    default:
                        alert(XMLHttpRequest);
                }
            }
        }
        errAlert(XMLHttpRequest.status)
    }
});

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注