[jquery] ajax 통신중 로딩바 만들기

Jquery Ajax 통신 중 로딩 바 만들기

 

1. Ajax 요청 시 마다 각각 처리하는 방법

 - beforeSend 에서 로딩바를 생성하고 complete에서 로딩바를 해제한다

 - 아래 경우 마우스 커서를 변경하는 방식을 사용했으나 상황에 따라 변경하면 되겠다

$.ajax({
    url: URL,
    dataType: 'json',
    type: 'POST',
    data: {
        //data
    },
    beforeSend: function() {
        //마우스 커서를 로딩 중 커서로 변경
        $('html').css("cursor", "wait");
    },
    complete: function() {
        //마우스 커서를 원래대로 돌린다
        $('html').css("cursor", "auto");
    },
    success: function(data) {
        //통신성공
    }
});

 

2. 모든 Ajax 요청에 공통적으로 처리하는 방법

 - ajaxStart에서 로딩바를 생성하고 ajaxStop에서 로딩바를 해제한다

 - 아래 소스를 공통 js로 만들어두면 참조하는 모든 프론트 페이지에서 ajax요청이 있을 시 호출된다

//AJAX 통신 시작
$( document ).ajaxStart(function() {
    //마우스 커서를 로딩 중 커서로 변경
    $('html').css("cursor", "wait"); 
});
//AJAX 통신 종료
$( document ).ajaxStop(function() {
    //마우스 커서를 원래대로 돌린다
    $('html').css("cursor", "auto"); 
});