图文课程 职群旗下

  1. 首页
  2. 所有分类
  3. 前端
  4. jQuery 扩展 【ajax实例】

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='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();
}

});
},};

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

猜你喜欢
Web前端的35个jQuery小技巧 React入门最好的学习实例-TodoList
jQuery分析(3) - jQuery.fn.init Android系统移植与驱动开发——第六章——使用实例来理解Linux驱动开发及心得
jQuery中的动画与特效 jQuery中事件与动画的总结
Web前端新人笔记之jquery选择符 不写完不让回家的JQuery的事件与动画
jQuery中的事件冒泡 json传值以及ajax接收