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

我有一个带有多个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中用背景微调器图像描述）添加到父元素（但可以很容易地改变以改变自身或完全改变其他元素）

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

Answer 2

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

 jQuery.fn.extend({ // usage: $().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('
'); jQuery.ajax(url, options); } });