jquery,ajax二次封装 - javascript学习,js知识点 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> javascript >> jquery,ajax二次封装

原创jquery,ajax二次封装

jquery,ajax二次封装

网站经常要用ajax和服务器打交道,经常要写等待加载,等待操作等提示和一些固定参数比如post提交json格式返回,等等;为简化代码,二次封装是很必要的

使用方式:

cssteach.ajax({
    loadtitle: "正在加载,请稍候...",
    url: "http://cssteach.com",
    data: params,
    error: function(XMLHttpRequest, textStatus, errorThrown)  {
        //失败,有默认函数,error函数可不写
    },
    success: function(json) {
        //成功
    }
});    

封装代码如下:

var cssteach = {
    ajax: function(options) {
        var df = {
            loadtitle: "", //加载等待遮蔽层,空值表示不显示等待加载提示
            cache: false,
            url: "",
            type: "post",
            dataType: "json",
            async: false, //异步,false:同步
            timeout: 30000,
            error: function(XMLHttpRequest, textStatus, errorThrown) { alert("对不起!系统繁忙,请稍候访问。"); },
            success: function(data) { }
        };
        if (!options.url)
            return;

        //合并参数
        var options = $.extend(df, options);

        //-----------------------------------
        
        //把error函数指向err函数,清空error函数,以免造成死循环
        options.err = options.error;
        options.error = null; 
        //把success函数指向callback函数,清空success函数,以免造成死循环
        options.callback = options.success;
        options.success = null;

        //-----------------------------------
        
        //遮蔽层
        if (options.loadtitle) {
            cssteach.loading.show(options.loadtitle);
        }

        //-----------------------------------

        //ajax 失败 error
        options.error = function(XMLHttpRequest, textStatus, errorThrown) {
            if (options.loadtitle) {
                cssteach.loading.hide();
            }
            if (options.err) //err 函数
                options.err(XMLHttpRequest, textStatus, errorThrown);
        }
        //ajax 成功 success
        options.success = function(json) {
            if (options.loadtitle) {
                cssteach.loading.hide();
            }
            
            if(json.e==-1){
                //要求登录
            }
            else if(json.e==-2){
                //参数错误
            }
            
            if (options.callback) { //callback 函数
                options.callback(json);
            }
        }

        //ajax 调用
        $.ajax(options);

    },
    //遮蔽层
    loading: {
        show: function(text) {
            text = text || "正在操作,请稍候...";
            var loadinghtml = '<p style="position:fixed;color:#fff;text-align:center;width:100%;margin-top:160px">' + text + '</p>';
            var zz = $("#zhezhao_tt");
            if (zz.length == 0) {
                zz = $("<div id='zhezhao_tt' style='width:100%;background:#000;position:absolute;top:0px;left:0px;z-index:300;display:none;'></div>");

                // if ($(".content").length == 0)
                $("body").append(zz);
                //            else
                //                $(".content").append(zz);
            }
            $("#zhezhao_tt").height($(document).height()).fadeTo(250, 0.8).html(loadinghtml);
        },
        hide: function() {
            if ($("#zhezhao_tt").length > 0)
                $("#zhezhao_tt").remove();
        }
    }
}

原创文章内容原创,转载请注明出处:cssteach.com

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-10-157.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版