Javascript 在进行ajax调用时显示微调器，等待响应并阻塞页面

我有一个包含多个ajax调用的页面，用于从响应中加载一个部分…现在我必须在我正在进行ajax调用的部分上显示一个微调器，等待加载内容…如何才能有一个通用方法，将参数作为我进行ajax调用的部分的选择器并阻止页面背景

感谢您的建议和帮助。

我的代码：

$.fn.ajaxConvertLink = function() {
    $(this).click(function() {
        var wrap = $(this).parent();
        if (!wrap.hasClass('spinner')) {
            wrap.addClass('spinner');
            $.ajax({
                type: 'GET',
                url: $(this).attr('href'),
                success: function(data) {
                    $('#content_for_layout').html(data);
                },
                complete: function() {
                    wrap.removeClass('spinner');
                }
            });
        }
        return false;
    });
};

它将类微调器（在css中用背景微调器图像描述）添加到父元素（但可以很容易地更改为改变

a

本身或完全改变其他元素）

我的代码：

$.fn.ajaxConvertLink = function() {
    $(this).click(function() {
        var wrap = $(this).parent();
        if (!wrap.hasClass('spinner')) {
            wrap.addClass('spinner');
            $.ajax({
                type: 'GET',
                url: $(this).attr('href'),
                success: function(data) {
                    $('#content_for_layout').html(data);
                },
                complete: function() {
                    wrap.removeClass('spinner');
                }
            });
        }
        return false;
    });
};

它将类微调器（在css中用背景微调器图像描述）添加到父元素（但可以很容易地更改为改变

a

本身或完全改变其他元素）

---

您可以围绕jQuery.ajax方法编写一个代理。我们将向正在加载内容的元素添加一些简单的标记（您可以在别处设置样式），然后在请求完成后用responseText替换该标记：

jQuery.fn.extend({

    // usage: $(<selector>).spinnerload(); 
    spinnerload: function(url, options)
    {   
        var self = this;
        var options = options || {};
        var success = options.success || function() {};

        options.success = function(responseText, status, jqXHR)
        {
            self.html(responseText);
            success(responseText, status, jqXHR);
        }

        self.html('<div class="loading"></div>');
        jQuery.ajax(url, options);
    }

});

jQuery.fn.extend({
//用法：$（）.spinnerload（）；
喷丝头加载：函数（url、选项）
{   
var self=这个；
var options=options |{}；
var success=options.success | | function（）{}；
options.success=函数（responseText、status、jqXHR）
{
html（responseText）；
成功（responseText、status、jqXHR）；
}
self.html（“”）；
ajax（url，选项）；
}
});

您可以围绕jQuery.ajax方法编写一个代理。我们将向正在加载内容的元素添加一些简单的标记（您可以在别处设置样式），然后在请求完成后用responseText替换该标记：

jQuery.fn.extend({

    // usage: $(<selector>).spinnerload(); 
    spinnerload: function(url, options)
    {   
        var self = this;
        var options = options || {};
        var success = options.success || function() {};

        options.success = function(responseText, status, jqXHR)
        {
            self.html(responseText);
            success(responseText, status, jqXHR);
        }

        self.html('<div class="loading"></div>');
        jQuery.ajax(url, options);
    }

});

jQuery.fn.extend({
//用法：$（）.spinnerload（）；
喷丝头加载：函数（url、选项）
{   
var self=这个；
var options=options |{}；
var success=options.success | | function（）{}；
options.success=函数（responseText、status、jqXHR）
{
html（responseText）；
成功（responseText、status、jqXHR）；
}
self.html（“”）；
ajax（url，选项）；
}
});

谢谢，但是如果我想在自己的名称空间中包含my.ajaxConvertLink=（function（）{var default={}，config=$（{}，default，config）；return function（config）{..}；（），那么真的有必要将其作为jquery插件吗；这种方法很好，但我没有访问内容或其响应的权限…我只需要在ajax响应延迟时显示该微调器…谢谢，但如果我想在自己的命名空间中包含my.ajaxConvertLink=（function（）{var default={}，config=$（{}）这样的名称，是否真的有必要将其作为jquery插件，默认值，config）；返回函数（config）{….}；（））；这种方法很好，但我无法访问内容或其响应…我只需要在ajax响应延迟时显示微调器…您有JSFIDLE或任何示例吗？您有JSFIDLE或任何示例吗？