码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 扩展 【ajax实例】

时间:2016-05-20 19:18:44      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

先前写工具类都是自定义类,直接prototype,jQuery扩展这一块儿,一直也没写过,刚好今天有空,写个试试。

已经有很多人对jQuery,jQuery.fn,jQuery.fn.extend详细说明过了,此处不再赘述,直接上代码。

jQuery.ibt = {

    // 定义全局常量

    showLoading : function (mask) { // 显示遮罩层
        var _html = "";
        if (mask) {
            _html = "<div id=‘pop_mask‘ style=‘width: 100%;height: 100%;position: fixed; top: 0;left: 0;background-color: rgba(0,0,0,0.5);z-index: 99;display:none;‘>";
        } else {
            _html = "<div id=‘pop_mask‘ style=‘width: 100%;height: 100%;position: fixed; top: 0;left: 0;background-color: transparent;z-index: 99;display:none;‘></div>";

        }
        $("body").append(_html);
        $("#pop_mask").fadeIn("fast");
    },

    hideLoading : function () { // 隐藏遮罩层
        $("#pop_mask").fadeOut("fast");
    },

    handleError : function () { // 处理错误

    },

    ajax : function (opt) { // 自定义ajax请求

        var defaults = { // 默认值
            type : ‘get‘,
            mask : false, //蒙板
            async : true, // 异步
            cache : true, // 缓存
            dataType : ‘json‘, // 返回数据类型
            timeout : 8000, // 最长请求时限
            contentType : ‘application/json‘, // 数据格式
        };

        var opts = jQuery.extend(defaults, opt);

        jQuery.ajax({
            url : opts.url,
            type : opts.type,
            data : opts.data,
            async : opts.async,
            cache : opts.cache,
            dataType : opts.dataType,
            timeout : opts.timeout,
            contentType : opts.contentType,
            success : opts.success,
            beforeSend : function () {
                $.ibt.showLoading(opts.mask);
            },
            complete : function (res) {
                if (res.statusText == "timeout") {
                    console.error("the request timeout");
                }
                $.ibt.hideLoading();
            }
        });
    },
};

学习之后的实践,欢迎拍砖。

jQuery 扩展 【ajax实例】

标签:

原文地址:http://www.cnblogs.com/seaton/p/5513080.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!