jq ajax封装

Posted 小奉手

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jq ajax封装相关的知识,希望对你有一定的参考价值。

//ajax公共方法,zs 2017-06-14
$.extend({
    //比jq的ajax多了的参数:
    //salert是否在请求成功后弹出后台的SuressStr字段值
    //ealertStr:请求出错
    majax: function (a) {
        if (typeof a === "object") {
            var defaultOption = {
                url: "",
                async: true,
                cache: true,//dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
                data: null,
                type: "get",
                timeout: null,
                dataType: "",//预期服务器返回的数据类型
                contentType: "application/x-www-form-urlencoded",//发送信息至服务器时内容编码类型。
                beforeSend: function (XMLHttpRequest) {
                    //  console.log("请求开始");
                },
                //dataFilter: function (data, type) {
                //    console.log("请求成功success之前");
                //dataFilter给Ajax返回的原始数据的进行预处理的函数。它的调用在success之前
                //测试1.10.2和2.0.3版本的js如果存在此方法则success不会执行。会直接到error方法里,虽然状态码是200
                //},
                success: function (data, textStatus, jqXHR) {
                    // console.log("请求成功");
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //  console.log("请求出错");
                },
                complete: function (XMLHttpRequest) {
                    //在error或success之前执行
                    // console.log("无论成功错误我都存在");
                },
                context: null,//这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象
                global: true,//是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
                ifModified: false,//仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 \'etag\' 来确定数据没有被修改过。
                jsonp: "",
                jsonpCallback: "",
                username: null,
                password: null,
                processData: true,
                scriptCharset: "",
                traditional: false,// 默认的话,traditional为false,即jquery会深度序列化参数对象,不深度序列化的例子:data:{ p: ["123", "456", "789"] },p会序列化成 p=123&p=456&p=456。深度序列化例子:data:{foo:["bar1", "bar2"]} 转换为 \'&foo=bar1&foo=bar2\'。
                //xhr: function () {
                //测试会导致返回的status为0
                //},
                //自加参数
                eAlertStr: "",//请求出错弹出的内容
                eAlertStrOrder: false,//eAlertStr弹出的顺序,false表示在error方法执行完毕之后弹出
                sAlert: false,//请求成功后是否弹出后台返回的SuccessStr字段的内容,必须确定后台返回的是能序列化的json
                sAlertOrder: false,//sAlert弹出的顺序,false表示在success方法执行完毕之后弹出
                execomplete: function (data, textStatus, jqXHR) {
                    //success或error方法执行完毕,success时该方法的参数才有值
                    // console.log("方法执行完毕了");
                }
            }
            for (i in a) {
                defaultOption[i] = a[i];
            }
            $.ajax({
                url: defaultOption.url,
                async: defaultOption.async,
                cache: defaultOption.cache,
                data: defaultOption.data,
                type: defaultOption.type,
                timeout: defaultOption.timeout,
                dataType: defaultOption.dataType,
                contentType: defaultOption.contentType,
                beforeSend: function (XMLHttpRequest) {
                    defaultOption.beforeSend(XMLHttpRequest);
                },
                //dataFilter: function (data, type) {
                //    defaultOption.dataFilter(data, type);
                //},
                success: function (data, textStatus, jqXHR) {
                    var i = true;
                    var datas = data;
                    if (defaultOption.sAlert && typeof data != "object") {
                        datas = JSON.parse(data);
                    }
                    if (defaultOption.sAlert && defaultOption.sAlertOrder && datas.SuccessStr != null && datas.SuccessStr != "undefined" && $.trim(datas.SuccessStr) != "") {
                        $.gritter.add({
                            title: "提示",
                            text: datas.SuccessStr,
                            class_name: \'gritter-success \'
                        });
                        i = false;
                    }
                    if (!i) {
                        setTimeout(function () {
                            defaultOption.success(data, textStatus, jqXHR);
                            defaultOption.execomplete(data, textStatus, jqXHR);
                        }, 400);
                    } else {
                        defaultOption.success(data, textStatus, jqXHR);
                        if (i && defaultOption.sAlert && datas.SuccessStr != null && datas.SuccessStr != "undefined" && $.trim(datas.SuccessStr) != "") {
                            $.gritter.add({
                                title: "提示",
                                text: datas.SuccessStr,
                                class_name: \'gritter-success \'
                            });
                        }
                        setTimeout(function () {
                            defaultOption.execomplete(data, textStatus, jqXHR);
                        }, 400);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    var i = true;
                    if (defaultOption.eAlertStrOrder && defaultOption.eAlertStr != null && defaultOption.eAlertStr != "undefined" && $.trim(defaultOption.eAlertStr) != "") {
                        $.gritter.add({
                            title: "提示",
                            text: defaultOption.eAlertStr,
                            class_name: \'gritter-error \'
                        });
                        i = false;
                    }
                    if (!i) {
                        setTimeout(function () {
                            defaultOption.error(XMLHttpRequest, textStatus, errorThrown);
                            defaultOption.execomplete(data, textStatus, jqXHR);
                        }, 400);
                    } else {
                        defaultOption.error(XMLHttpRequest, textStatus, errorThrown);
                        if (i && defaultOption.eAlertStr != null && defaultOption.eAlertStr != "undefined" && $.trim(defaultOption.eAlertStr) != "") {
                            $.gritter.add({
                                title: "提示",
                                text: defaultOption.eAlertStr,
                                class_name: \'gritter-error \'
                            });
                            setTimeout(function () {
                                defaultOption.execomplete(data, textStatus, jqXHR);
                            }, 400);
                        }
                    }
                },
                complete: function (XMLHttpRequest) {
                    defaultOption.complete(XMLHttpRequest);
                },
                context: defaultOption.context,
                global: defaultOption.global,
                ifModified: defaultOption.ifModified,
                jsonp: defaultOption.jsonp,
                jsonpCallback: defaultOption.jsonpCallback,
                username: defaultOption.username,
                password: defaultOption.password,
                processData: defaultOption.processData,
                scriptCharset: defaultOption.scriptCharset,
                traditional: defaultOption.traditional,
                //xhr: function () {
                //    defaultOption.xhr();
                //}
            });
        } else {
            console.log("参数格式不正确");
        }
    },
    mpost: function (url, data, callback, type) {
        if (jQuery.isFunction(data)) {
            type = type || callback;
            callback = data;
            data = undefined;
        }
        return $.majax({
            url: url,
            type: "post",
            dataType: type,
            data: data,
            success: callback
        });
    },
    mget: function (url, data, callback, type) {
        if (jQuery.isFunction(data)) {
            type = type || callback;
            callback = data;
            data = undefined;
        }
        return $.majax({
            url: url,
            type: "get",
            dataType: type,
            data: data,
            success: callback
        });
    },
});

成功的提示的插件为 $.gritter自行引用,也可以自己改成你们项目里的,注意下我这提示用的返回字段也要更改成你们项目的

转载注明:http://www.cnblogs.com/zszs/p/7016606.html

以上是关于jq ajax封装的主要内容,如果未能解决你的问题,请参考以下文章

jq.ajax和ajax的Promise封装

JQ 的 ajax 封装

jq ajax封装

仿jq封装ajax

模仿JQuery封装ajax功能

jq中使用promise封装ajax