javascript - 当我们进行 ajax 调用并等待响应并阻止页面时显示微调器

Question

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

感谢任何建议和帮助。

Answer 1

我的代码:

$.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 本身或完全其他元素)

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

执行:

$('#xxx').ajaxConvertLink();

http://jsfiddle.net/Jacek_FH/2dAyf/