Question

有时在我的应用程序中有很多元素加载，所以我想在控件（或DOM节点）上面显示典型的AJAX微调器，并禁用它。

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

理想情况下，我想：

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

甚至可以直接使用元素执行AJAX请求：

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

将#myelement作为常规节点或表单输入。

Answer 1

您可以使用beforeSend和complete回调：

$.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
    }
});

Answer 2

由于您已经在使用jQuery，因此您可能希望结合BlockUI查看Darin Dimitrov's answer。我现在还没有使用它，因为我今天刚看到它，但它看起来还不错。

如果您正在编写一个半大型的应用程序并期望从代码中的不同位置进行许多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
    }
}));

另外，我不建议覆盖$.ajax方法本身。

Answer 3

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

Answer 4

如果您想在每次调用ajax时显示微调器，我认为您应该使用ajaxStart和ajaxStop。

$("#spinner")
  .ajaxStart(function(){$(this).show();})
  .ajaxStop(function(){$(this).hide();});

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

4 个答案: