[ajax] 통신 중 로딩 처리

ajax를 이용하여 대용량의 파일을 업로드할 때 로딩 중 처리가 필요할 때가 있다.

그럴땐 로딩중을 표시해주면 사용자 입장에서는 로딩중인지 렉걸린건지 구분을 할 수가 있다.

 

$("#subtn").click(function(){
    $.ajax({
      url : "./member",
      data : $('form').serialize(),
              beforeSend: function() {
                 //통신을 시작할때 처리되는 함수 
                 $('.lodding').css("display","block");   // 현재 html 문서위에 있는 마우스 커서를 로딩 중 커서로 변경
              },
                complete: function() {
                     //통신이 완료된 후 처리되는 함수
                     $('.lodding').css("display","none"); // 통신이 완료 된 후 다시 일반적인 커서 모양으로 변경
                },
      dataType : "json",
      method : "POST"
    })
    .done(function(data){
      $.each(data, function(key, val){
        items.push(val);
        console.log(items);
      });
        $(".email_cof").text(data);
        $(".id_cof").text(data);
    })
  });