Question

我正在尝试创建一个通用函数，为用户提供有关其ajax调用状态的反馈。它将在目标之后绘制一些加载箭头，然后将其替换为在调用完成时淡出的勾号。这是我到目前为止所得到的：

功能：

function ajaxFeedback(target){
    jQuery.ajaxSetup({
        beforeSend: function(){
            jQuery(target).after("<img src='/images/loading/small_dark_arrows.gif' class='loading_arrows'>");
            jQuery.ajaxSetup({beforeSend: ''});
        },
        complete: function(){
            jQuery(target).siblings(".loading_arrows").replaceWith("<img src='/images/icons/tick.png' class='loading_arrows'>");
            jQuery(target).siblings(".loading_arrows").fadeOut('slow', function() {
                jQuery(target).siblings(".loading_arrows").remove();
            });
            jQuery.ajaxSetup({complete: ''});
        }
    });
}

使用中：

function saveDefaultBlockGroup(e){
    // e is the event from a button click 
    ajaxFeedback(e.target);
    jQuery.get("ajax/derp.cfm");
    return false;
}

这很好用，但有一些问题。如果我们后来决定在jQuery.ajaxSetup中定义其他东西，这个函数将会对它们进行核实。此外，如果在ajaxFeedback（e.target）和ajax调用之间发生了某些事情，我们将得到意想不到的结果（不太可能，但我喜欢我的代码更加防弹）。

连连呢？我想保持使用语法简单，但如果我们需要，函数会变得疯狂。

编辑：页面上的大多数ajax请求都不会使用。整个网站只有几个特定的地方。这仍然会出现在数百个地方。

Answer 1

如果您每次提交AJAX请求时都要更新beforeSend和complete回调函数，为什么要使用中间ajaxFeedback函数？看起来你可以像这样将两个函数放在一起：

function saveDefaultBlockGroup(e){
    // e is the event from a button click 
    jQuery.ajax({
        url        : 'ajax/derp.cfm',
        type       : 'get',
        beforeSend : function(){
            jQuery(e.target).after("<img src='/images/loading/small_dark_arrows.gif' class='loading_arrows'>");
        },
        complete   : function(){
            jQuery(e.target).siblings(".loading_arrows").replaceWith("<img src='/images/icons/tick.png' class='loading_arrows'>").fadeOut('slow', function() {
                jQuery(this).remove();
            });
        }
    });
    return false;
}

更新

试试这个：

function setGlobalAJAX(target) {
    return {
        beforeSend: function(){
            jQuery(target).after("<img src='/images/loading/small_dark_arrows.gif' class='loading_arrows'>");
        },
        complete: function(){
            jQuery(target).siblings(".loading_arrows").replaceWith("<img src='/images/icons/tick.png' class='loading_arrows'>").fadeOut('slow', function() {
                jQuery(this).remove();
            });
        }
    };
}

function saveDefaultBlockGroup(e){
    // e is the event from a button click 
    var opts  = setGlobalAJAX(e.target);
    opts.url  = "ajax/derp.cfm";
    opts.type = "get";
    jQuery.ajax(opts);
    return false;
}

这使用一个函数来设置可以传递给jQuery.ajax()的对象的属性。 setGlobalAJAX函数为特定的AJAX调用设置beforeSend和complete回调。然后，您可以向此对象添加其他属性，例如url和请求类型（get / post）。

我认为这更像是你在寻找的东西。您并不需要使用全局函数，因为您没有在全球范围内重复执行某些操作（每个beforeSend和complete都不同）。

Answer 2

这是我最终做的（改编自jQuery源代码）：

jQuery.fancyAjax = function( target, url, data, callback, type ) {
    // shift arguments if data argument was omitted
    if ( jQuery.isFunction( data ) ) {
        type = type || callback;
        callback = data;
        data = undefined;
    }
    return jQuery.ajax({
        type: type,
        url: url,
        data: data,
        success: callback,
        dataType: type,
        beforeSend: function(){
            jQuery(target).after("<img src='/images/loading/small_dark_arrows.gif' class='loading_arrows'>");
        },
        complete: function(){
            jQuery(target).siblings(".loading_arrows").replaceWith("<img src='/images/icons/tick.png' class='loading_arrows'>");
            jQuery(target).siblings(".loading_arrows").fadeOut(2000, function() {
                jQuery(target).siblings(".loading_arrows").remove();
            });
        }
    });
};

使用中：

function saveDefaultBlockGroup(e){
    // e is the event from a button click 
    jQuery.fancyAjax(e.target, "ajax/derp.cfm");
    return false;
}

高级jQuery-Fu：单个调用的Ajax反馈

2 个答案:

更新