[웹][javascript] ajax 통한 데이터 전송

ajax란? ajax는 비동기적인 웹 애플리케이션의 제작을 위해 이용하는 개발 기법이다. 
비동기란? 비동기란, 각 작업이 완료될 때까지 기다리지 않고 요청한 작업을 처리하는 방식이다. 
이 비동기식 방법은 서버에 부하를 덜고 사용자와의 상호작용을 증가시킨다. 

다음은 웹의 프론트엔드(frontend)에서, 입력된 데이터를 서버로 전송하는 ajax 코드 해석이다.  

1) 이벤트 전파 중단 방법 

event. preventDefault() : 현재 이벤트의 기본 동작을 중단 

event.stopPropagation() : 현재 이벤트가 상위 부모로 전파되지 않도록 중단 

event.cancleBubble = true;

- event.stopPropagation()의 별칭이다.
- 이벤트 핸들러에서 반환되기 전에 true로 설정하면 이벤트가 전파되지 않는다.

2) ajax 요청 변수 상세 

url : 데이터 요청 url (데이터를 전송하고자 하는 서버가 되겠다.)
type : GET/POST (서버에 데이터를 HTTP의 GET/POST방식으로 전송한다.)  
data : formData (요청과 함께 보내는 form 데이터, 반드시 파라미터로 전송하도록 한다.) 
context : this 
success : 요청이 성공적으로 전송되었을 때 실행되는 함수 
fail : 요청이 실패했을때 실행되는 함수. 에러의 내용을 출력한다.

CRUD (Create, Read, Update, Delete)에 근거하여 

DELETE (삭제하기) 의 경우 type을 DELETE로 해주어도 되지만,

ajax의 경우 type은 POST로 하고  _method를 DELETE로 정의해주어야한다. 

 

3) 코드 예시  

아래는 form_name이라는 이름의 form을 제출했을때, javascript 코드이다. 

 

$('.form_name').on('submit', function(e) {

    e.preventDefault();

    if(!confirm("confirm_text"))

        return;

    var formData = new FormData(this);

    $.ajax({

        type: 'POST',

        url: this.action,

        data: formData,

        contentType: false,

        processData: false,

        context: this,

        success: function(data) {

            location.reload();

        },

        error: function(data) {

            if (data.responseJSON.hasOwnProperty('errors')) {

                for (var key in data.responseJSON.errors) {

                    $('#'+key).addClass('error');

                    $('.'+key+' > .error-notice').html(data.responseJSON.errors[key][0]);

                }

                alert('data_failed');

            } else {

                alert('data_failed');

            }

        }

    });

});