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

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

时间: 2024-10-10 15:27:47

jQuery 扩展 【ajax实例】的相关文章

【JQuery】jquery完成ajax实例

Jquery菜鸟学习连接: https://www.runoob.com/jquery/jquery-tutorial.html jquery完成ajax实例 原文地址:https://www.cnblogs.com/zhuzhubaoya/p/12316245.html

jquery实现ajax实例

继上一篇: js+json实现ajax实例 jquery代码: $(function(){ // 查询员工 var oKeyword=$('#keyword'),//员工编号 oSearchRes=$('#searchResult');//反馈结果显示 // 查询员工按钮点击事件 $('#search').on('click',function(){ searchStaff(); }) // 创建查询员工方法 function searchStaff(){ $.ajax({ type:'GET'

Ajax-05 使用XMLHttpRequest和jQuery实现Ajax实例

需求: (django)使用XMLHttpRequest和jQuery实现Ajax加法运算 url.py: from django.conf.urls import url from hello import views urlpatterns = [ url(r'add/', views.add, name='add'), url(r'add_number/', views.add_number, name='add_number'), ] add.html <!DOCTYPE html>

jQuery使用AJAX实例

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录实例</title> <!--引入jQuery--> <script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>

原生javascript实现Ajax和jQuery实现Ajax实例应用

这是我自己写的例子,希望对大家有帮助 使用了struts2,jdk1.6 1.实体类书写 public class Student { private String toid ; private String name ; private String sex ; public String getToid() { return toid ; } public void setToid(String toid) { this.toid = toid; } public String getNam

一个php+jquery+json+ajax实例

json.php <!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Co

【JavaScript】jQuery Ajax 实例 全解析

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) :

jQuery Ajax 实例 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$

jQuery Ajax 实例 ($.ajax、$.post、$.get)转

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$