zoukankan      html  css  js  c++  java
  • jQuery 扩展 【ajax实例】

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

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

    jQuery.ibt = {
    
        // 定义全局常量
    
        showLoading : function (mask) { // 显示遮罩层
            var _html = "";
            if (mask) {
                _html = "<div id='pop_mask' style=' 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=' 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();
                }
            });
        },
    };

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

  • 相关阅读:
    Java 运用流传输文件
    Java-Web 用html和css写一个EasyMall注册界面
    Java-Web 用html写一个简单的用户注册界面
    Java-Web DOM方式解析xml文件
    弹窗的淡入淡出
    html5 indexDB的使用
    nodejs生成UID(唯一标识符)——node-uuid模块
    CSS3 Flex布局(伸缩布局盒模型)学习
    map area 标签的使用
    CSS3 伸缩布局盒模型
  • 原文地址:https://www.cnblogs.com/seaton/p/5513080.html
Copyright © 2011-2022 走看看