gpt4 book ai didi

jquery - 启动和完成 Ajax 调用时的加载程序

转载 作者:行者123 更新时间:2023-12-01 02:29:38 26 4
gpt4 key购买 nike

这可能是一个相当基本的 jQuery 问题,但是在研究了 12 个多小时的各种 jQuery 代码、破译了在各种 jQuery 版本中什么可以工作、什么不可以工作之后,这个问题难倒了我。我正在开发 1.9.1,因为这对于我正在利用的所有其他插件来说似乎是最稳定的。

我想在 Ajax 请求启动时向指定容器添加一个类和一个图像,因此我相信我可以使用 ajaxStart,并使用 ajaxComplete 删除该类。

我将多次使用该函数,因为整个网站都是基于 Ajax 加载内容,所以我希望尽可能地简化它。

目前,没有任何反应。我单击“buttonid”,但没有任何反应,错误控制台通知“myajaxfunc 不是函数”。这是我目前所处的位置:-

(function($){
$.fn.extend({
$.fn.myajaxfunc = function() {
$(document).ajaxStart(function() {
this
.addClass("loader");
.append('<img src="images/loader-icon.gif">');
}).ajaxStop(function() {
.removeClass("loader");
});​
});
});
});

然后我尝试调用这个“myajaxfunc”函数,如下所示:-

    $("#buttonid").click(function(){
$('.main-content').myajaxfunc();

$.ajax({url:"path/to/content.html",dataType:"html",success:function(result){
$(".main-content").html(result);

}});
});

我哪里出错了?理想情况下,我希望能够在几个点击事件上调用“myajaxfunc”,因为我有十几个菜单项,每个菜单项都有一个点击函数,它将通过ajax获取的内容放入主内容区域,因此像 .myajaxfunc 一样调用它我认为 () 似乎是最好、最简单的前进方式。

最佳答案

最终的工作解决方案,包括错误状态,似乎运行良好:-

 $.fn.extend({
myajaxfunc: function () {

this.each(function () {
var element = $(this);
$(document).ajaxStart(function () {
element.empty().append('<img src="images/loader-icon.gif">').addClass("loader");
}).ajaxStop(function () {
$(this).unbind("ajaxStart");
element.removeClass("loader");
}).ajaxError(function (e,xhr,opt) {
element.empty().append('<h1>AJAX Failed!</h1>').removeClass("loader");
element.appendTo('<p><strong>Location:</strong> '+ opt.url + '</p><p><strong>Status Code:</strong> ' + xhr.status + '</p><p><strong>Reason:</strong> ' + xhr.statusText + '</p></div>');
});
});
}
});

调用它:-

$("#buttonid").click(function(){

$('.main-content').myajaxfunc();

$.ajax({url:"path/to/file.html",dataType:"html",success:function(result){
$(".main-content").html(result);
}});

});

我还添加了一个取消绑定(bind)方法,这样这只发生在初始页面加载时,这允许我再次使用其他 AJAX 对新加载的页面进行小更改,而无需再次覆盖。

关于jquery - 启动和完成 Ajax 调用时的加载程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23402788/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com