当我们进行ajax调用并等待响应并阻塞页面时显示一个旋转器

displaying a spinner when we make an ajax call and waiting for the response and blocking the page

本文关键字：显示 旋转 一个 ajax 我们 调用 等待 响应      更新时间：2023-09-26

我有一个页面，有多个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;
    });
};

它为父元素添加了类spinner(在css中是用背景spinner图像来描述的)(但可以很容易地改变a本身或完全其他元素)

<a href="/foo/bar" id="xxx'>YYY</a>
执行:

$('#xxx').ajaxConvertLink();
http://jsfiddle.net/Jacek_FH/2dAyf/

您可以围绕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);
    }
});
相关文章：