Javascript 显示HTML元素是AJAX加载的最简单/最好的方法是什么？

有时在我的应用程序中，有许多元素正在加载，因此我想在控件（或DOM节点）上方显示禁用的典型AJAX微调器

最简单/最好的方法是什么

理想情况下，我希望：

$("#myelement").loading();
$("#myelement").finishloading();

或者更好地使用元素直接执行AJAX请求：

$("#myelement").post(url, params, myfunction);

---

作为

#myelement

常规节点或表单输入。

我过去所做的是，在post时将元素id（包含div）传递给一个函数，该函数用加载图像替换其内部HTML，然后在回发中，用更新的真实内容再次替换其内容。

您可以在发送前使用

和
完成
回调：

$.ajax({
    url: 'script.cgi',
    type: 'POST',
    beforeSend: function() {
        $('.spinner').show();
    },
    complete: function() {
        // will trigger even if request fails
        $('.spinner').hide();
    },
    success: function(result) {
        // todo: do something with the result
    }
});

因为您已经在使用jQuery，所以可能需要结合使用。我自己还没用过它，因为我今天刚碰到这个，但它看起来不错

如果您正在编写一个半大型ish应用程序，并且希望在代码中的不同位置进行许多AJAX调用，那么我建议您要么在
$.AJAX
上添加一层抽象，要么创建一个帮助函数，以避免UI指示器到处都有锅炉板。如果您需要更改指标，这将对您有很大帮助

抽象方法

var ajax = function(options) {
    $.ajax($.extend(
        {
            beforeSend: function() {
                $.blockUI();
            },
            complete: function() {
                $.unblockUI();
            }
        }, 
        options
    ));
};

ajax({
    url: 'script.cgi',
    type: 'POST',
    success: function(result) {
        // todo: do something with the result
});

var ajaxSettings = function(options) {
    return $.extend(
        {
            beforeSend: function() {
                $.blockUI();
            },
            complete: function() {
                $.unblockUI();
            }
        }, 
        options
    );
};

$.ajax(ajaxSettings({
    url: 'script.cgi',
    type: 'POST',
    success: function(result) {
        // todo: do something with the result
    }
}));

助手方法

var ajax = function(options) {
    $.ajax($.extend(
        {
            beforeSend: function() {
                $.blockUI();
            },
            complete: function() {
                $.unblockUI();
            }
        }, 
        options
    ));
};

ajax({
    url: 'script.cgi',
    type: 'POST',
    success: function(result) {
        // todo: do something with the result
});

var ajaxSettings = function(options) {
    return $.extend(
        {
            beforeSend: function() {
                $.blockUI();
            },
            complete: function() {
                $.unblockUI();
            }
        }, 
        options
    );
};

$.ajax(ajaxSettings({
    url: 'script.cgi',
    type: 'POST',
    success: function(result) {
        // todo: do something with the result
    }
}));

另外，我不建议覆盖
$.ajax
方法本身。
如果您想在每次进行ajax调用时显示微调器，我认为您应该使用和

理想情况下，您应该编写一个简单的jquery插件/包装器来简化这个过程。。。但肯定已经有东西存在了？我最终使用的是jQuery BlockUI元素阻塞