我有一个带有多个ajax调用的页面来加载响应中的一部分...现在我必须在我正在进行ajax调用的部分上显示一个微调器,等待内容被加载...我可以有一个通用的方法,它将一个参数作为我正在进行ajax调用并阻止页面背景的部分的选择器
感谢任何建议和帮助。
答案 0 :(得分:3)
我的代码:
$.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();
答案 1 :(得分:1)
您可以围绕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);
}
});