AJAX 호출에서 loading .. 메시지를 추가하는 방법은 무엇입니까?

Question

나는이 같은 AJAX 기능이 있습니다

function change_session(val) { 
    var change_session_id=document.getElementById('select_path').value; 
     $.ajax({ 
       type: "GET", 
       url: "/change_path/", 
       async: false, 
       data: {change_session_id:change_session_id}, 
       success: function(data){ 
        document.getElementById('transfer1').innerHTML=data; 
        document.getElementById('transfer1').style.display="block"; 
       } 
      }); 

} 

을 나는 선택 성명에서 AJAX를 적용하고 있습니다 :

<select onchange="change_session()" name="select_path" id="select_path"> 

       <option name="server_id" id="select_path" value="{{ i.id }}">{{ active }}</option> 
       {% for i in session_info %} 
       <option name="server_id" id="select_path" value="{{ i.id }}">{{ i.session_name }}</option> 
       {% endfor %} 
       <input type="hidden" id="change_session_id" value="{{ i.id }}" /> 
      </select> 

모든 것이 잘 작동하지만, 선택 문에서 option을 변경하는 동안 내용이 걸립니다 로드 할 시간과 옵션 명령문은 change_path 함수가 완료 될 때까지 고정됩니다. 그래서 로딩이 완료되는 동안 div 요소에 "Loading" 메시지를 추가하고 싶습니다.

Answer 1

async:false을 제거해야 창을 정지해야합니다. 당신이 만드는 전에 그런 다음 AJAX를 사용하면 DOM의 로딩 메시지를 표시 호출하고 성공을 숨길 :

function change_session(val) { 
var change_session_id=document.getElementById('select_path').value; 

$("#transfer1").html("Loading..."); 

    $.ajax({ 
      type: "GET", 
      url: "/change_path/", 
      data: {change_session_id:change_session_id}, 
      success: function(data){ 

       $('#transfer1').html(data) 
        .css("display", "block"); 

      } 
     }); 

} 

을 그리고 jQuery를 사용하는 경우 이미 대신 일반 자바 스크립트의 jQuery를 선택기/기능을 사용할 수 있습니다. :)

Answer 2

jQuery에는이 이벤트가 내장되어 있습니다.

/** 
* onAjax -> Loading indicator 
*/ 
$("body").on({ 
    ajaxStart: function() { 
     $(this).addClass("loading"); // I mostly use this. It adds a class to the body. 
    }, 
    ajaxStop: function() { 
     $(this).removeClass("loading"); 
    }  
}); 

그래서 CSS에서 당신은 같은 것을 할 수있는 이러한 CSS 규칙은 단지 예이다

#loading-ind {position:absolute; top:0; left:0; height:100%; width:100%; display:none;} 
body.loading #loading-ind {display:block;} 

을, 중요한 속성은 표시입니다. 나머지는 당신이 원하는대로 설정할 수 있습니다.

그러나 클래스를 제거/추가하는 대신 모든 종류의 작업을 수행 할 수 있습니다.) 해당 경우 div에 'loading ..'텍스트가 추가됩니다. 이러한 이벤트가 모든 ajax 호출에서 발생한다는 것을 명심하십시오. 이것이 최선의 선택인지 모릅니다.

Answer 3

CSS 코드 :

.loadingMask { 
    background: url(loader.gif) center 50% no-repeat #000000; 
    top:0; 
    left:0; 
    position:fixed; 
    height:100%; 
    width:100%; 
    opacity:0.7; 
    filter:alpha(opacity=70); 
    z-index:12030 
} 

이 css 배경 속성에 웹 페이지에 로딩 오버레이 ..

를 생성합니다 .. 당신이 당신의로드 이미지를 생성 할 수있는 로딩 이미지 경로를 제공 ajaxload.info Generator.

HTML :

<div class="loadingMask" id="loadingMask" style="visibility: hidden;"></div> 

자바 스크립트 : 그것은 false하기 때문에

function change_session(val) { 
    var change_session_id=document.getElementById('select_path').value; 
     $.ajax({ 
       type: "GET", 
       url: "/change_path/", 
       async: false, 
       beforeSend :function(){ 
        $("#loadingMask").css('visibility', 'visible'); 
       }, 
       data: {change_session_id:change_session_id}, 
       success: function(data){ 
        $("#loadingMask").css('visibility', 'hidden'); 
        document.getElementById('transfer1').innerHTML=data; 
        document.getElementById('transfer1').style.display="block"; 
       } 
      }); 

} 

Answer 4

당신은 async:true에 async:false을 변경해야 더 이상 비동기 요청하지 않습니다.

beforeSend 블록에서 AJAX 요청을 보내기 전에 JQuery의 콜백 메소드를 사용할 수 있으며 완료 후 complete 콜백을 사용하여로드 메시지를 숨길 수 있습니다.

function change_session(val) { 
    var change_session_id=document.getElementById('select_path').value; 
     $.ajax({ 
       type: "GET", 
       url: "/change_path/", 
       async: false, 
       data: {change_session_id:change_session_id}, 
       beforeSend: function (xhr) {  
        $("#loadingDIV").show(); 
       }, 
       success: function(data){ 
        document.getElementById('transfer1').innerHTML=data; 
        document.getElementById('transfer1').style.display="block"; 
       }, 
       complete : $("#loadingDIV").hide() 
      }); 

} 

Answer 5

한 가지 해결 방법은 클릭 한 경우 (잠재적 인) 로딩 시간에 대한 메시지는 change_session를 호출합니다 모든 DOM 요소 (발)에 Bootstrap Tooltip를 추가하는 것입니다.

가장 좋지 않지만 사용자가 항목을 클릭하여 마우스를 가리키면 메시지가 표시됩니다.