• 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

  • 相关阅读:
    ES6——ECMAScript与Javascript
    sass 成熟、稳定、强大的专业级CSS扩展语言
    前端开发自动化工作流工具:JavaScript自动化构建工具grunt、gulp、webpack介绍
    CSS布局模型(流动模型、浮动模型、层模型)
    document.write
    HTML页面加载和解析流程
    script标签
    javascript 对象方法、类方法、原型方法
    RabbitMQ如何解决各种情况下丢数据的问题
    SpringBoot集成Quartz定时任务(持久化到数据库)
  • 原文地址:https://www.cnblogs.com/zszs/p/7016606.html
Copyright © 2020-2023  润新知