jquery - 在 jquery ajax 调用上实现加载 gif 图像

Question

我红色了一些关于堆栈溢出的文章和类似问题，但并没有真正找到任何简单干净的解决方案来解决这个问题。

例如，这是我的 ajax 函数:

  $.ajax({
            url: "/Home/AddSong",
            type: "POST",
            data: $("#AddTopTenFavForm").serialize(),
            success: function (data) { ShowMsg("Song Added Successfully"), $(container).find('ul').append('<li><a class="savedLinks" href="#" name="' + substr + '" >' + name + '</a> <span name= ' + data +' class="btnDeleteSong dontDoAnything">x</span></li>'); },
            error: function () { ShowMsg("There was an error therefore song could not be added, please try again") }
        });

我想调用我的函数:

 function ShowAjaxLoader() {
$("#dottedWrapper").fadeIn();
$("#loadingGifContainer").fadeIn();
}

 function HideAjaxLoader() {
$("#dottedWrapper").fadeOut(1000);
$("#loadingGifContainer").fadeOut(1000);
}

Ajax 请求何时开始以及何时完成。请帮忙谢谢

Answer 1

在ajax之前调用show函数，成功或错误时调用Hide函数

ShowAjaxLoader();
   $.ajax({
        url: "/Home/AddSong",
        type: "POST",
        data: $("#AddTopTenFavForm").serialize(),
        success: function (data) { 
          HideAjaxLoader();
          ShowMsg("Song Added Successfully"), $(container).find('ul').append('<li><a class="savedLinks" href="#" name="' + substr + '" >' + name + '</a> <span name= ' + data +' class="btnDeleteSong dontDoAnything">x</span></li>'); },
        error: function () { 
          HideAjaxLoader();
          ShowMsg("There was an error therefore song could not be added, please try again") }
    });