jquery ajax 호출에서 로딩 GIF 이미지 구현

Question

나는 스택 오버플로에 빨간색 기사와 유사한 질문을하지만이 문제에 대한 간단한 간단한 해결책을 찾지 못했습니다. 내 함수를 호출하고 싶은

$.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 요청이 시작하고 끝날 때

예를 들어이 내 아약스 기능입니다. 당신은 JQuery와 아약스 이벤트를 사용할 수있다 감사

Answer 1

전화 아약스 전에 쇼 기능, 다음 $.ajaxSetup

Answer 2

도와주세요 http://docs.jquery.com/Ajax_Events

같은 beforeSend :, 전체 :, 성공 :, 오류 등의 이벤트가 있습니다

그냥 기능은 이러한 이벤트 내에서 호출했습니다. 당신은 사용하여 수행 할 수 있습니다

Answer 3

글로벌 설정 성공 또는 오류시 숨기기 함수를 호출 Ajax Events. 이 모든 아약스 요청에 어떻게 그런 식으로 (서로 다른 장소에서 하나 이상을 선택 또한 경우에 적은 코드 중복을 일으키는 원인이) 당신이 만드는

$("#loading").bind("ajaxSend", function(){ 
    ShowAjaxLoader(); 
}).bind("ajaxComplete", function(){ 
    HideAjaxLoader(); 
}); 

Answer 4

에 정의 된 모든 아약스 호출에 영향을

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") } 
    });