Question

这可能是一个相当基本的jQuery问题，但经过12个多小时的工作，经过各种jQuery代码，破译在各种jQuery版本中有效和无效的内容，这个问题让我很难过。我正在研究1.9.1，因为这似乎是我正在利用的每个其他插件最稳定的。

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

我将多次使用该函数，因为整个站点都是基于Ajax加载内容，所以我希望尽可能地简化这一过程。

目前，没有任何事情发生。我点击了＆＃39; buttonid＆＃39;并且没有任何反应，错误控制台通知＆＃34; myajaxfunc不是函数＆＃34;。到目前为止我在这里： -

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

然后我试着把这个称为“myajaxfunc＆＃39;功能，像这样： -

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

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

        }});                
    });

我哪里错了？理想情况下，我希望能够打电话给＃34; myajaxfunc＆＃34;几个点击事件，因为我有十几个菜单项，每个菜单项都有一个点击功能，通过ajax将内容放入主要内容区域，所以调用它像.myajaxfunc（）似乎是最好，最简单的前进方式，我认为

Answer 1

最终工作解决方案，包括错误状态，似乎运作良好： -

 $.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);
    }});

});

我还添加了一个unbind方法，这样只会在初始页面加载时发生，这样我就可以再次使用其他AJAX对新加载的页面进行小的更改，而无需再次使用叠加。

Answer 2

你可以用这种方式做到这一点，这在我的最后工作正常。

$(document).ready(function () {

   $("#Loading").ajaxStart(function () {
    $(this).show();
    });

   $("#Loading").ajaxStop(function () {
    $(this).hide();
    });
});

此处#Loading是您要显示或隐藏的加载程序图像的ID。

Answer 3

我这样做了，这对我来说很好。

$(document).ajaxStart(function () {
    $('#DivProgress').show();
});
$(document).ajaxComplete(function () {
    $('#DivProgress').hide();
});

其中DivProgress是定义加载器的div的id。

Answer 4

您应该删除fn.extend中的命名空间所以：＆＃39; $ fn.extend（{methodyouwannaaddd}）＆＃39;

或者删除extend alltogether并只定义方法：＆＃39; $ fn.methodyouwannaadd＆＃39;

Answer 5

这可能是您定义扩展方法的方式。以下可能会更好。

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

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


     });

 }});

Answer 6

使用ajax global events

$(document).bind("ajaxSend", function () {
   //Show loader....
}).bind("ajaxStop", function () {
   //hide loader....
}).bind("ajaxError", function () {
   //hide loader....
});

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

6 个答案: